您的位置：首页 > Web前端 > JavaScript

javascript学习-原生javascript的小特效（原生javascript实现链式运动）

2014-10-21 16:36 543 查看

以下代码就不详细解析了，在我之前的多个运动效果中已经解析好多次了，重复的地方这里就不说明了，有兴趣的童鞋可以去看看之前的文章《原生javascript的小特效》

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body,*{margin: 0;padding: 0;}

li{width: 300px;height:100px;background: yellow;margin-top: 10px;filter: alpha(opacity:30);opacity: 0.3}

</style>

<script type="text/javascript">

window.onload=function(){

var aLi=document.getElementsByTagName("li")[0];

aLi.onmouseover=function(){

onOut(aLi,500,'width',function(){ //我们把一个匿名函数作为参数传进，函数同样执行 onOut()函数

onOut(aLi,300,'height');

});

}

aLi.onmouseout=function(){

onOut(aLi,100,'height',function(){

onOut(aLi,300,'width');

});

}

}

function onOut(that,tag,tagattr,fun){

clearInterval(that.timer);

that.timer=setInterval(function(){

var speed;

var attr;

if(tagattr=='opacity'){

attr=Math.round(parseFloat(getAttr(that,tagattr)));

//计算机在处理小数点的时候不是很准确的，一般这样我们都四舍五入一下

}else{

attr=parseInt(getAttr(that,tagattr));

}

if(tagattr=='opacity'){

speed=(tag-attr);

}

else{

speed=(tag-attr)/20;

}

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(attr==tag){

clearInterval(that.timer);

if(fun){ //判断是否有fun参数传进来

fun();// 链式运动中我们在停止上一次运动的时候，来个判断，是否有fun这个函数，有的话就执行

}

}else{

if(tagattr=='opacity'){

that.style.filter="alpha(opacity:'+speed+')";

that.style.opacity=speed/100;

}else{

that.style[tagattr]=attr+speed+"px";

}

}

},20)

}

function getAttr(obj,attr){

var style;

if(obj.currentStyle){

style=obj.currentStyle[attr];

}else{

style=getComputedStyle(obj,false)[attr];

}

return style;

}

</script>

</head>

<body>

<ul>

<li></li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航