js平滑运动效果代码

时间：2022-07-02 14:53:03 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

#divid{ left:400px;top:100px;background:#666;position:absolute;opacity:0.1;filter:alpha(opacity=10);}
span{float:left;display:block;padding:5px; cursor:pointer;}</style></p>
<script>
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}
//id，要设置的图片ID，节点移动速度，要移动到的目的支持：['width:100','height:100','left:100','top:100','opacity:100','scrollTop:100','scrollLeft:100']，移动完成后回调方法名不支持参数，可选
//如果事件中有opacity属性：则页面样式中要定义：opacity:0.1;filter:alpha(opacity=10);
function spaceTo(id,slot,mx,fun)
{
	var o=$(id),over=0,ar=Array(),len=mx.length,temp;$("abc").innerHTML="";
	for(var i=0;i<len;i++){ar[i]=mx[i].split(":");ar[i]=ar[i].concat(li(ar[i][0]));ar[i][1]=parseInt(ar[i][1]);ar[i][1]>ar[i][2]&&(ar[i][1]+=(slot-1));ar[i][5]=true;}
	clearInterval(window[id+"spaceTo"]);window[id+"spaceTo"]=setInterval(mov,10);
	function mov()
	{
		for(var i=0;i<len;i++)
		{
			if(ar[i][5])
			{
				ar[i][2]+=(temp=Math.floor((ar[i][1]-ar[i][2])/slot));
				ar[i][3][ar[i][0]]=ar[i][0]=='opacity' && !(/*@cc_on!@*/false)?ar[i][2]*0.01:ar[i][2]+ar[i][4];
				if(temp==0){ar[i][5]=false;over++;}
			}
		}
		if(over==len){clearInterval(window[id+"spaceTo"]);if(fun){fun();}}
	}
	//属性元素及初始值
	function li(name)
	{
		switch (name)
		{ 
			case "width":return [o.offsetWidth,o.style,"px"];
			case "height":return [o.offsetHeight,o.style,"px"];
			case "left":return [o.offsetLeft,o.style,"px"];
			case "top":return [o.offsetTop,o.style,"px"];
			case "scrollTop":return [o.scrollTop,o,0];
			case "scrollLeft":return [o.scrollLeft,o,0];
			case "opacity":return /*@cc_on!@*/false?[o.filters.alpha.Opacity,o.filters.alpha,0]:[o.style.opacity*100,o.style,0];
		}
	}
}
function vvvb(){alert("完了")}
</script>
<p><span onclick="spaceTo('divid',20,['width:300','height:300','left:100','top:100','opacity:100'],vvvb)"><a href="http://111com.net">左右展开</a></span> <span onclick="spaceTo('divid',20,['width:10','height:10','left:200','top:200','opacity:10'])">左右展开</span></p>
<div id="divid"> </div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js平滑运动效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程