JavaScript学习笔记2--DOM、运动

最新推荐文章于 2022-08-25 19:16:28 发布

谦_duke

最新推荐文章于 2022-08-25 19:16:28 发布

阅读量471

点赞数

分类专栏： JavaScript 文章标签： javascript dom 运动

本文链接：https://blog.csdn.net/rickyduke/article/details/50587688

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、DOM

创建跟插入示例：

oUl.appendChild（oLi）是先将oLi从原来的父级删除，然后再插入oUl.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
	window.onload = function()
	{
		var oUl = document.getElementById("ul1");
		var oBtn = document.getElementById("btn1");
		var oTxt = document.getElementById("txt1");
		
		oBtn.οnclick=function()
		{
			var oLi=document.createElement("li");
			var aLi=document.getElementsByTagName("li");
			oLi.innerHTML=oTxt.value;	
			
			//在ul后面插入li节点
			//oUl.appendChild(oLi);
			
			//在li数组指定位置插入li节点
			oUl.insertBefore(oLi,aLi[0]);
		}	
	}
</script>
</head>

<body>
<input id="txt1" type="text"/>
<input  type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>
</body>
</html>

删除示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
	window.onload = function()
	{
		var oUl = document.getElementById("ul1");
		var aA = document.getElementsByTagName("a");
		
		for(var i=0;i<aA.length;i++)
		{
			aA[i].onclick = function()
			{
				//this表示当前a元素，this表示当前a元素的父元素li元素。
				oUl.removeChild(this.parentNode);
			}
		}
		
	}
</script>
</head>

<body>
<ul id="ul1">
	<li>示例1<a href="javascript:;">删除</a></li>
    <li>示例2<a href="javascript:;">删除</a></li>
    <li>示例3<a href="javascript:;">删除</a></li>
    <li>示例4<a href="javascript:;">删除</a></li>
    <li>示例5<a href="javascript:;">删除</a></li>
    <li>示例6<a href="javascript:;">删除</a></li>
    <li>示例7<a href="javascript:;">删除</a></li>
    <li>示例8<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>

2、获取table表格内容

oTable.tBodies[0].rows[0].cells[0].innerHTML

3、运动

3.1匀速运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,div,input {margin:0; padding:0;}
#div1 {width:200px; height:200px; position:absolute; left:0; top:50px; background:red;}
</style>
<script>
var timer = null;
var speed = 10;
function startMove()
{
	var oDiv = document.getElementById("div1");	
	//先关闭前面定时器再打开新的定时器，否则多次打开定时器会导致速度叠加
	clearInterval(timer);
	timer=setInterval(function (){
		if(oDiv.offsetLeft <= 300){
			oDiv.style.left = oDiv.offsetLeft+speed+"px";
		}else{
			clearInterval(timer);
		}
	},30);
}

</script>
</head>

<body>
<input id="btn1" type="button" value="开始运动" οnclick="startMove()"/>
<div id="div1">
</div>
</body>
</html>

3.2分享侧边栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,div,span {margin:0; padding:0;}
#div1 {width:150px; height:200px; position:absolute; left:0; top:50px; background:green; left:-150px}
#div1 span {width:20px; height:60px; position:absolute; line-height:20px; background:blue; top:70px; right:-20px;}
</style>
<script>
window.οnlοad=function()
{
	var oDiv=document.getElementById("div1");	
	oDiv.οnmοuseοver=function()
	{
		startMove(0);
	}
	oDiv.οnmοuseοut=function()
	{
		startMove(-150);
	}
}

var timer = null;
function startMove(iTarget)
{
	
	var oDiv = document.getElementById("div1");	
	var speed=iTarget<oDiv.offsetLeft?-10:10;
	clearInterval(timer);
	timer=setInterval(function (){
		if(oDiv.offsetLeft == iTarget){
			clearInterval(timer);
		}else{
			oDiv.style.left = oDiv.offsetLeft+speed+"px";
		}
	},30);
}

</script>
</head>

<body>
<div id="div1">
	<span>分享到</span>
</div>
</body>
</html>

3.3淡入淡出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,div,span {margin:0; padding:0;}
/* IE用fliter:alpha(opacity:30);  火狐，chrome用opacity:0.3*/
#div1 {width:250px; height:200px; position:absolute; background:red; 
fliter:alpha(opacity:30); opacity:0.3}
</style>
<script>
window.οnlοad=function()
{
	var oDiv=document.getElementById("div1");	
	oDiv.οnmοuseοver=function()
	{
		startMove(100);
	}
	oDiv.οnmοuseοut=function()
	{
		startMove(30);
	}
}

var timer = null;
//默认30透明度
var alpha = 30;
function startMove(iTarget)
{
	var oDiv = document.getElementById("div1");	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=iTarget>alpha?5:-5;
		if(iTarget==alpha)
		{
			clearInterval(timer);
		}else
		{
			alpha+=speed;
			oDiv.style.filter="alpha(opacity:"+alpha+")";	
			oDiv.style.opacity=alpha/100;
		}
	},30);
}

</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

3.4缓冲运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; left:0; position:absolute; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; background:blue;}
</style>

<script>
function startMove()
{
	var oDiv=document.getElementById("div1");
	setInterval(function(){
		var speed=(300-oDiv.offsetLeft)/10;
		//速度小于1的话向上取整，floor()向下取整
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		oDiv.style.left=oDiv.offsetLeft+speed+"px";
	
		document.title=oDiv.offsetLeft;
	},30);	
}
</script>
</head>

<body>
<input id="btn1" type="button" value="开始运动" οnclick="startMove()"/>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>

3.5右下角悬浮框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {right:0; width:100px; height:150px; position:absolute; background:red;}
</style>
<script>
window.οnscrοll=function()
{
	var oDiv=document.getElementById("div1");	
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
	
	startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
}

var timer = null;
function startMove(iTarget)
{
	var oDiv=document.getElementById("div1");
	clearInterval(timer);
	timer=setInterval(function(){
		var speed=(iTarget-oDiv.offsetTop)/4;	
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);	
		}
		else
		{
			oDiv.style.top=oDiv.offsetTop+speed+'px';	
		}
	},30);
}
</script>
</head>

<body style="height:2000px">
<div id="div1">
</div>
</body>
</html>

3.6对联悬浮框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {right:0; width:100px; height:150px; position:absolute; background:red;}
</style>
<script>
window.οnscrοll=function()
{
	var oDiv=document.getElementById("div1");	
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	//oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
	
	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
}

var timer = null;
function startMove(iTarget)
{
	var oDiv=document.getElementById("div1");
	clearInterval(timer);
	timer=setInterval(function(){
		var speed=(iTarget-oDiv.offsetTop)/4;	
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);	
		}
		else
		{
			oDiv.style.top=oDiv.offsetTop+speed+'px';	
		}
	},30);
}
</script>
</head>

<body style="height:2000px">
<div id="div1">
</div>
</body>
</html>

3.7匀速运动停止

如果速度无法被运动距离整除，则无法精确运动到目标，下面是解决方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; right:600px; position:absolute; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; background:blue;}
#div3 {width:1px; height:300px; position:absolute; left:100px; background:blue;}
</style>

<script>
var timer=null;
function startMove(iTarget)
{
	var oDiv=document.getElementById("div1");
	clearInterval(timer);
	timer=setInterval(function(){
		var speed=0;
		speed=oDiv.offsetLeft<iTarget?7:-7;
		//运动物体与目标距离相差值小于运动速度
		if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
		{
			clearInterval(timer);
			//将最后剩下的小于速度值的距离直接赋值给运动物体
			oDiv.style.left=iTarget+'px';
		}
		else
		{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	},30);	
}
</script>
</head>

<body>
<input type="button" value="100" οnclick="startMove(100)"/>
<input type="button" value="300" οnclick="startMove(300)"/>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>

3.8多个物体同时运动（例子：div变宽）

为每个div设定一个定时器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:100px; height:50px; background:red; margin:10px;}
</style>

<script>
window.οnlοad=function()
{
	var aDiv=document.getElementsByTagName("div");
	for(var i=0;i<aDiv.length;i++)
	{
		//给每个div加一个定时器
		aDiv[i].timer=null;
		aDiv[i].οnmοuseοver=function()
		{
			startMove(this, 400);	
		}
		aDiv[i].οnmοuseοut=function()
		{
			startMove(this, 100);	
		}
	}	
}

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);	
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

3.9多物体淡入淡出

定时器作为物体的属性，所有东西不能公用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:100px; height:100px; margin:20px; float:left; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.οnlοad=function()
{
	var aDiv=document.getElementsByTagName("div");	
	
	for(var i=0;i<aDiv.length;i++)
	{
		aDiv[i].alpha=30;
		aDiv[i].οnmοuseοver=function()
		{
			startMove(this, 100);	
		};
		aDiv[i].οnmοuseοut=function()
		{
			startMove(this, 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);
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

3.10变宽和变高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:red; }
</style>
<script>
window.οnlοad=function()
{
	var oDiv1=document.getElementById("div1");
	var oDiv2=document.getElementById("div2");
	oDiv1.οnmοuseοver=function()
	{
		startMove(this,'height',600);	
	}
	oDiv1.οnmοuseοut=function()
	{
		startMove(this,'height',200);	
	}
	oDiv2.οnmοuseοver=function()
	{
		startMove(this,'width',600);	
	}
	oDiv2.οnmοuseοut=function()
	{
		startMove(this,'width',200);	
	}
}

function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];	
	}	
	else
	{
		return getComputedStyle(obj, false)[name];	
	}
}

function startMove(obj, attr, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		//代替offset，采用offset的时候，加上边框会出现bug
		var cur=parseInt(getStyle(obj, attr));
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(cur==iTarget)
		{
			clearInterval(obj.timer);	
		}
		else
		{
			obj.style[attr]=cur+speed+'px';
		}
		
	},30);
}
</script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>

3.11运动框架及使用实例

单一运动框架：只能一个运动结束后才能进行下一个运动

// JavaScript Document
function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];	
	}	
	else
	{
		return getComputedStyle(obj, false)[name];	
	}
}

//参数分别是：操作对象，参数，参数值，操作结束后执行函数
function startMove(obj, attr, iTarget, fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		//代替offset，采用offset的时候，加上边框会出现bug
		var cur=0;
		if(attr=='opacity')
		{
			//Math.round();四舍五入
			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
		}
		else
		{
			cur=parseInt(getStyle(obj, attr));
		}
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(cur==iTarget)
		{
			clearInterval(obj.timer);	
			if(fnEnd())fnEnd();
		}
		else
		{
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+cur+speed+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		
	},30);
}

使用实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:red; }
</style>
<script>
window.οnlοad=function()
{
	var oDiv1=document.getElementById("div1");
	oDiv1.οnmοuseοver=function()
	{
		startMove(this,'width',100);	
	}
	oDiv1.οnmοuseοut=function()
	{
		startMove(this,'width',30);	
	}
}

function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];	
	}	
	else
	{
		return getComputedStyle(obj, false)[name];	
	}
}

function startMove(obj, attr, iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		//代替offset，采用offset的时候，加上边框会出现bug
		var cur=0;
		if(attr=='opacity')
		{
			//Math.round();四舍五入
			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
		}
		else
		{
			cur=parseInt(getStyle(obj, attr));
		}
		
		var speed=(iTarget-cur)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(cur==iTarget)
		{
			clearInterval(obj.timer);	
		}
		else
		{
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+cur+speed+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		
	},30);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

完美运动框架：可以同时进行多个运动，也可以分步骤进行运动

// JavaScript Document
function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];	
	}	
	else
	{
		return getComputedStyle(obj, false)[name];	
	}
}

//参数分别是：操作对象，json参数和参数值，操作结束后执行函数
//startMove(oDiv, {width:400, height:400});
function startMove(obj, json, fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var bStop=true;	//假设所有值已经到了目标值
		
		for(var attr in json){
			
			//代替offset，采用offset的时候，加上边框会出现bug
			var cur=0;
			if(attr=='opacity')
			{
				//Math.round();四舍五入
				cur=Math.round(parseFloat(getStyle(obj, attr))*100);
			}
			else
			{
				cur=parseInt(getStyle(obj, attr));
			}
			
			var speed=(json[attr]-cur)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			//如果当前属性值还没到目标值，则表示还有属性值需要进行运动
			if(cur!=json[attr])
				bStop=false;
			
			if(attr=='opacity')
				{
					obj.style.filter='alpha(opacity:'+cur+speed+')';
					obj.style.opacity=(cur+speed)/100;
				}
				else
				{
					obj.style[attr]=cur+speed+'px';
				}
			}
			
			if(bStop)
			{
				clearInterval(obj.timer);	
				if(fnEnd)fnEnd();
			}
	},30);
}

使用实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; fliter:alpha(opacity:30); opacity:0.3}
</style>
<script src="move2.js"></script>
<script>
window.οnlοad=function()
{
	var oDiv1=document.getElementById("div1");
	
	oDiv1.οnmοuseοver=function()
	{
		startMove(oDiv1,{width:300, height:300, opacity:100});
	}
		
	oDiv1.οnmοuseοut=function()
	{
		startMove(oDiv1,{width:100, height:100, opacity:30});
	}
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>