javascript學習-原生javascript的小特效（原生javascript實現鏈式運動）

文章出處

以下代碼就不詳細解析了，在我之前的多個運動效果中已經解析好多次了，重復的地方這里就不說明了，有興趣的童鞋可以去看看之前的文章《原生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>

文章列表