链式运动实现有可以动,但是边框有重叠
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jsonmove.js"></script> <style type="text/css"> body,ul,li{ margin: 0; padding: 0; } ul,li{ width: 200px; height: 100px; background-color:yellow; margin-bottom:20px; border:4px solid #000; filter: alpha(opacity:30); opacity: 0.3; } </style> <script type="text/javascript"> window.onload = function() { var oLi = document.getElementById('li1'); oLi.onmouseover = function(){ //startMove(oLi,'width',400); /*宽高不能同时动,因为第二个定时器会覆盖第一个,如果想要同时动需要用到JSON(轻量级的数据交换格式)*/ //startMove(oLi,'height',200); startMove(oLi,{width:400,height:200,opacity:100}); } oLi.onmouseout = function(){ startMove(oLi,{width:200,height:100,opacity:30}); } } </script> <title></title> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } //json:多对值的变化 //startMove(obj,{attr1:itarget1,attr2:itarget2},fn) //回调函数fn function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //取当前json的值做循环 for(var attr in json){s //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; // speed = speed>0?Math.ceil(speed):Math.floor(speed); //3、检测停止 if (icur == json[attr]) { clearInterval(obj.timer); if (fn) { fn(); } }else{ if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';//ie obj.style.opacity = (icur+speed)/100;//火狐,chrome } else { obj.style[attr] = icur+speed+'px'; } } } },30) }
我的代码写出来运行后去下图,求大大帮看哪里写错了