速度渐变：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul,li{ list-style:none}ul li{width:200px;height:100px;background:yellow;margin-bottom:20px;}</style><script>window.onload = function(){var aLi = document.getElementsByTagName('li');for(var i =0;i<aLi.length;i++){aLi[i].timer = null;aLi[i].onmouseover = function(){startMove(this,400);}aLi[i].onmouseout = function(){startMove(this,200);}}}function startMove(obj,iTarget){clearInterval(obj.timer);obj.timer = setInterval(function(){var speed = (iTarget-obj.offsetWidth)/8;speed = speed >0?Math.ceil(speed):Math.floor(speed);if(obj.offsetWidth == iTarget){clearInterval(obj.timer);}else{obj.style.width = obj.offsetWidth + speed + 'px';}},30)}</script></head><body><ul> <li></li> <li></li> <li></li></ul></body></html>
透明度渐变：代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body{padding:0;margin:0}div{width:200px;height:200px;background:red;margin:20px;filter:alpha(opacity:30);opacity:0.3;float:left;}</style><script>window.onload = function(){var oDiv = document.getElementsByTagName('div');for(var i=0;i<oDiv.length;i++){oDiv[i].alpha = 30;oDiv[i].onmouseover = function(){startMove(this,100);}oDiv[i].onmouseout = function(){startMove(this,30);}}}//var timer = null;//var alpha = 30;function startMove(obj,seat){clearInterval(obj.timer);//var oDiv = document.getElementById('div1');obj.timer = setInterval(function(){if(obj.alpha > seat){speed = -10;}else{speed = 10;}if(obj.alpha == seat){clearInterval(obj.timer);}else{obj.alpha += speed;obj.style.filter = 'alpha(opacity:'+obj.alpha+')';obj.style.opacity = obj.alpha/100;}},30)}</script></head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div></body></html>
版权声明：本文为博主原创文章，未经博主允许不得转载。