html部分
<!DOCTYPE html> <html lang="en"> <head> <link href="../css/default.css" rel="stylesheet"> <script src="../js/main.js"> </script> <meta charset="utf-8"> <title> Document </title> <script type="text/javascript"> window.onload=function(){ var div=document.getElementsByTagName('div'); for(var i=0;i<div.length;i++){ div[i].timer=null; div[i].onmouseover = function() { // var _this = this; // var _this2 = _this; startMove(this, {400,height:400,opacity:100}); // startMove(_this, 400, 'height', function() { // startMove(_this2, 100, 'opacity'); // }); // }); //用this可以调取当前的节点对象 }; div[i].onmouseout = function() { // var _this = this; // var _this2 = _this; startMove(this,{200,height:200,opacity:30}); // startMove(_this, 200, 'height', function() { // startMove(_this2, 200, 'width'); // }); // }); //用this可以调取当前的节点对象 }; } }; </script> </meta> </link> </head> <body> <div id="div1"> </div> <div id="div2"> </div> </body> </html>
js部分
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr];//针对IE获取样式 } else { return getComputedStyle(obj, false)[attr];//针对非IE获取样式。 } } //获取样式的好处，是防止出现obj.offsetWidth与boder这样的Bug。 function startMove(obj, json, fn) { //iTarget是具体的数字，attr是宽或高或透明度之类的。json[attr]，包括2者 clearInterval(obj.timer); //清除计时器 obj.timer = setInterval(function() {
var flag=true;//假设所有都到达了目标 for (var attr in json) { //用json，这样的话，可以2个函数同时运行。 var icur = 0; var speed = 0; if (attr == 'opacity') { icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //这里获取到的是透明度 } else { icur = parseInt(getStyle(obj, attr)); //因为获取到的宽或者高是小数，所以需要强制转换下,这里获取到的是宽高之类的 } /*上面部分是获取具体的值，及是否是透明度*/ speed = (json[attr] - icur) / 8; //因为这里的attr不能直接代表obj.offsetLeft,要用样式去获取. //json[attr]代替iTarget《==》speed=(iTarget-obj.offsetLeft)/8 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(json[attr] != icur) { flag=false; }
if(attr == 'opacity') {
obj.style[attr] = (icur + speed) / 100; //icur+speed是当前的透明度加上变化的速度
obj.style.filter = 'alpha(opacity' + (icur + speed) + ')';
} else {
obj.style[attr] = icur + speed + 'px';
}
if(flag) { clearInterval(obj.timer); if (fn) { fn(); //如果有回调函数就执行回调函数。 } } } }, 30); }
css部分
* { margin: 0; padding: 0 } div { width: 200px; height: 200px; filter: alpha(opacity:30);//针对IE的透明度 opacity: 0.3;//非IE的透明度 background: blue; margin-bottom: 20px; }
js 分4部分
1.判断类型，是透明度还是宽或者高
2.算运动速度
3.检测停止
4.清除计时器