js节点和无缝滚动

最新推荐文章于 2023-03-31 16:04:21 发布

liuwenguang__1207

最新推荐文章于 2023-03-31 16:04:21 发布

阅读量391

点赞数

文章标签：节点和无缝运动

节点的增删改复制的操作

用到的方法和属性
1、获取某个节点的父节点
parentNode属性
2、获取某个节点的子节点集合
childNodes属性
3、创建一个新的节点
createTextNode（节点文本内容）document对象的方法在某些浏览器上兼容性不是很好
createElemen（对象）document对象的方法例如:document.createElement(“a”);
4、给某个节点对象添加属性和属性值
setAttribute（属性，属性值）；aNode.setAttri（“href”,”http://www.baidu.com“）;
5、替换某个节点下的子节点
replaceChild（新节点，原子节点）；
6、将某个节点添加到一个节点下
appendChild（要添加的节点）
7、克隆某个节点
cloneNode() 不传参数和传入true参数一样，表示克隆该节点包括子节点

<!DOCTYPE html>
<html>
<head>
<title>node_CURD.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div{
border: red 1px solid;
width: 200px;
height: 50px;
margin: 20px 30px;
padding: 20px;
}
#div_1{
clear:both;
background-color:#FF3366;
}
#div_2{
clear:both;
background-color:#6699FF;
}
#div_3{
clear:both;
background-color:#CCCC99;
}
#div_4{
clear:both;
background-color:#00CC33;
}
</style>
<script type="text/javascript">
// 增加方式一：给第一个div区域添加文本
function addText(){
//1.获取要添加文本内容的节点
var div_1Node = document.getElementById("div_1");
//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。
var TextNode = document.createTextNode("这不就显示了吗？");
//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
div_1Node.appendChild(TextNode);
}
// 增加方式二：给第一个div区域添加按钮
function addButton(){
//1.获取要添加文本内容的节点
var div_1Node = document.getElementById("div_1");
//2.创建一个节点。document对象的createElement()
var aNode = document.createElement("input");
//3.给指定对象添加属性和属性值
//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样
aNode.type="button";
aNode.setAttribute("value","按钮");
aNode.setAttribute("onclick","deleteText('div_1')");
//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
div_1Node.appendChild(aNode);
}

// 删除方式一：删除第二个区域的节点的子节点
function deleteText(NodeId){
//1.获取块节点
var divNode = document.getElementById(NodeId);
//2.获取子节点，即文本节点
var chileNode = divNode.childNodes[0];
//3.删除，传入一个参数true会删除其下所有子节点
//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容
divNode.removeChild(chileNode);
}
// 删除方式二：删除元素
function deleteElement(){
//1.获取块节点
var div_2Node = document.getElementById("div_2");
//2.获取父节点，
var parentNode = div_2Node.parentNode;
//3.删除
parentNode.removeChild(div_2Node);
}

// 修改
function UpdateText(){
//1获取要修改字符的区域的节点
var div_3Node = document.getElementById("div_3");
//2.获取第一步中的子节点集合，指定到要修改的节点
var childNode = div_3Node.childNodes[0];
//3.创建一个文本节点
var newNode = document.createTextNode("哈哈，我把你替换了.");
//4.用3步创建的节点替换2步骤中的节点
//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容
div_3Node.replaceChild(newNode,childNode);
}
//克隆
function copyNode(){
//1.获取第四区域节点
var div_1Node = document.getElementById("div_1");
//2.获取第一区域节点
var div_4Node = document.getElementById("div_4");
//3.获得一个新节点通过克隆第四节点
var newNode = div_4Node.cloneNode();//传入参数true表示克隆整个节点，包括子节点.默认是true参数的结果
//4.将步骤3的新节点替换掉原来的第一节点
div_1Node.parentNode.replaceChild(newNode,div_1Node);
}
</script>
</head>

<body>
<div id="div_1"></div>

<div id="div_2">这里是第二个区域</div>

<div id="div_3">这里是第三个区域</div>

<div id="div_4">这里是第四个区域</div>
<hr />
<font size="12px">增：</font>
<input type="button" value="给第一个区域增加文本" onclick="addText()" />
<input type="button" value="给第一个区域增加一个按钮" onclick="addButton()" />
<hr />
<font size="12px">删：</font>
<input type="button" value="删除第二区域的文本内容" onclick="deleteText('div_2')" />
<input type="button" value="删除第二个区域" onclick="deleteElement()" />
<hr />
<font size="12px">改：</font>
<input type="button" value="修改第三个区域中的内容" onclick="UpdateText()" />
<hr />
<font size="12px">克隆：</font>
<input type="button" value="将第四区域克隆到第一区域" onclick="copyNode()" />
</body>
</html>

无缝滚动的结构
一共两个盒子，第一个大盒子下套第二个大盒子，第二个大盒子下有4张图片，第一个大盒子固定宽度，第二个大盒子宽度是400%；
原理：
第一个盒子相对浮动，第二个盒子绝对浮动，让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候，让left值瞬间归0.

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{padding: 0;margin: 0;}
            #box{
                width: 740px;
                height: 116px;
                position: relative; 
                margin: 100px;
                overflow: hidden;           
            }
            #box ul{
                position: absolute;
                left: 0px;
                top: 0px;
                clear: both;
            }
            #box ul li{
                width: 185px;
                height: 116px;
                list-style: none;
                float: left;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBox=document.getElementById('box');
                var oUl=oBox.getElementsByTagName('ul')[0];
                var aLi=oUl.getElementsByTagName('li');
                var oBtn1=document.getElementById('btn1');
                var oBtn2=document.getElementById('btn2');

                var speed=-2;

                oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//2个ul
                oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

                function move(){
                    if(oUl.offsetLeft<-oUl.offsetWidth/2){
                        oUl.style.left='0px';
                    }
                    if(oUl.offsetLeft>0){
                        oUl.style.left=-oUl.offsetWidth/2+'px';
                    }
                    oUl.style.left=oUl.offsetLeft+speek+'px';
                }
                var timer=setInterval(move,30);
                oBtn1.onclick=function(){
                    speek=-2;
                }
                oBtn2.onclick=function(){
                    speek=2;
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="向左" />
        <input type="button" name="btn2" id="btn2" value="向右" />
        <div id="box">

            <ul>
                <li><img src="img/a1.jpeg"/></li>
                <li><img src="img/a2.jpeg"/></li>
                <li><img src="img/a3.jpeg"/></li>
                <li><img src="img/a4.jpeg"/></li>
            </ul>
        </div>
    </body>
</html>

offset家族
1.1 三大家族和一个事件对象
三大家族（offset/scroll/client）
事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控
制）

1.2 Offset家族简介
offset这个单词本身是–偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
1.2.1 o f f s e t W i d t h和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个
属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
1.2.2 o f f s e t L e f t和offsetTop （检测距离父盒子有定位的左/上面的距
离）
返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
1.2.3 o f f s e t P a r e n t （检测父系盒子中带有定位的父盒子节点）
1、返回改对象的父级（带有定位）
如果当前元素的父级元素没有进行CSS定位（position为absolute
或relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute
或relative，fixed）， offsetParent取最近的那个父级元素。