节点
offsetParent 查找定位的父元素
firstChild 和firstElementChild
操作元素属性
创建,插入,删除dom元素
createElement(标签名)
创建之后不能不管,需要使用他 ,这就用到了插入元素,
父级.appendChild(节点) 但是这个是添加到末尾
再后面插入
search()
oUl2.appendChild(oLi); //1.先把元素从原有父级上删掉 2.添加到新的父级
运动
主要由定时器组成
第一步就是先消除定时器,
2.根据目标是否达成判断speed的值
3.达到目的后消除定时器
4.封装后调用
关于缓冲运动
1.逐渐变慢,最后停下
变化速度和距离成正比,但是这样并不能完全到达目标地方
这时就需要对speed取整了 (利用math函数.ceil)
function startMove(target)
{
var qqq = document.getElementById('div1');
// var target = target;
setInterval(function() {
var speed = (target - qqq.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
qqq.style.left = qqq.offsetLeft + speed + 'px';
},30)
// var oDiv=document.getElementById('div1');
// setInterval(function (){
// var speed=(300-oDiv.offsetLeft)/10;
// oDiv.style.left=oDiv.offsetLeft+speed+'px';
// }, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(400)" />
<div id="div1">
</div>
匀速运动停止
var timer=null;
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(oDiv.offsetLeft<iTarget)
{
speed=7;
}
else
{
speed=-7;
}
if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
{
clearInterval(timer);
oDiv.style.left=iTarget+'px'; //重点
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
多物体运动需要多个定时器
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null;
aDiv[i].onmouseover=function ()
{
startMove(this, 400);
};
aDiv[i].onmouseout=function ()
{
startMove(this, 100);
};
}
};
//var timer=null;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+speed+'px';
}
}, 30);
}
多物体淡入淡出
在多物体运动下 不要共用属性
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].alpha=30;
aDiv[i].onmouseover=function ()
{
startMove(this, 100);
};
aDiv[i].onmouseout=function ()
{
startMove(this, 30);
};
}
};
//var alpha=30;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var speed=(iTarget-obj.alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
}, 30);
}