Ps:此代码在慕课网上有详解(http://www.imooc.com/video/3181)
先放代码
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } /*window.onload=function(){ var ali=document.getElementsByTagName('li'); for(var i=0;i<ali.length;i++){ ali[i].timer=null; ali[i].onmouseover=function(){ stratMove(this,'opacity',100); } ali[i].onmouseout=function(){ stratMove(this,'opacity',20); } } }*/ function stratMove(obj,json,fn){ var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for( var attr in json){ //1.取数值 var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else { icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/8;//8为比例系数 speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]) { flag=false; } /* clearInterval(obj.timer); if (fn){ fn(); } }*/ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; } else { obj.style[attr]=icur+speed+'px'; } if(flag){ clearInterval(obj.timer); if (fn){ fn(); } } }},30) }
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="move.js"></script>
<script language="JavaScript">
window.onload=function() {
var li = document.getElementById('li1');
li.onmouseover = function () {
stratMove(li, {'width':400,'height':200})
}
li.onmouseout = function () {
stratMove(li, {'width':200,'height':100})
}
}
</script>
<title>Title</title>
<style type="text/css">
li{
width: 200px;
height: 100px;
background-color: yellow;
border: 2px solid;
}
</style>
</head>
<body>
<ul>
<li id="li1">
</li>
</ul>
</body>
</html>
略解:
1.
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
这个是判断浏览器返回样式的函数,IE浏览器不支持getComputedStyle的返回,这个函数使move.js兼容IE。
2.
function stratMove(obj,json,fn){
var flag=true;
clearInterval(obj.timer); //防止鼠标重新激活此函数后造成的速度叠加
obj.timer=setInterval(function(){
for( var attr in json){
//1.取数值
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else {
icur=parseInt(getStyle(obj,attr));
}//透明度参数和长短参数类型不同
//2.算速度
var speed=(json[attr]-icur)/8;//8为比例系数,正数为向右移动,负数为向左移动
speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度除不尽,会造成到不了target的情况。
//3.检测停止,这有防止json中完成了一个值的变动后便停止了运动
if(icur!=json[attr]) {
flag=false;
}
if(attr=='opacity'){//透明度与长短参数值不同
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else {
obj.style[attr]=icur+speed+'px';
}
if(flag){
clearInterval(obj.timer);
if (fn){
fn();
}
}
}},30)
}