2020-08-11

最新推荐文章于 2020-08-28 10:39:27 发布

newbeeAmay

最新推荐文章于 2020-08-28 10:39:27 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/newbeeAmay/article/details/107933475

版权

节点

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);
}

newbeeAmay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-08-11

节点offsetParent 查找定位的父元素firstChild 和firstElementChild操作元素属性创建，插入，删除dom元素createElement（标签名）创建之后不能不管，需要使用他，这就用到了插入元素，父级.appendChild(节点) 但是这个是添加到末尾再后面插入search（）oUl2.appendChild(oLi); //1.先把元素从原有父级上删掉 2.添加到新的父级运动主要由定时器组成第一步就是先消除定时器，2.根据目标是
复制链接

扫一扫