欢迎各位亲们赏脸观看 * _ *
我们都知道，网站中有很多的运动，其需求不同，但大体结构类似。如果我们把每个功能模块都写出来，不仅浪费时间，而且浪费很多代码空间，增加代码冗余，使代码显得杂乱无章。 今天我们就来写一个框架，将不同的运动封装成一个方法，让不同的运动共用这一个方法，节省时间、空间。而且，这个框架一旦完成，无论何时想用，只要一个调用，就可以实现。 这个方法能实现的运动有变宽、变高、变字体大小、变透明度、变边框等等，基本上给标签添加的样式，用这个方法都能让他做出对应的改变。 下面就和我一起进入代码空间吧，相信你一定会有很大的收获--> // 获取当前样式 function getStyle(obj, name){ //解决获取当前样式在不同浏览器上的兼容问题 if(obj.currentStyle){ //IE7以下低版本浏览器 return obj.currentStyle[name] }else{ //火狐谷歌等高版本浏览器 return getComputedStyle(obj, false)[name]; } } var timer = null;//创建定时器 function startMove(obj, attr, target) { clearInterval(obj.timer);//清除旧定时器 obj.timer = setInterval(function () { var curStyle = 0; //单独处理透明度样式 if (attr == 'opacity') { curStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { //除透明度以外，其他样式 curStyle = parseInt(getStyle(obj, attr)); } //获取当期速度，并将其取整，避免不能精准到达指定位置 var speed = (target - curStyle) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (curStyle == target) { clearInterval(timer);//到达位置停止定时器 } else { if (attr == 'opacity') {//改变透明度的样式 obj.style.filter = 'alpha(opacity:' + (curStyle + speed) + ')'; obj.style.opacity = (curStyle + speed) / 100; } else {//改变除透明度以外的其他样式 obj.style[attr] = curStyle + speed + 'px'; } } }); } 以上代码基本上适合所有运动，只要调用startMove方法，并给他传上参数，就能实现你想要的简单运动。有兴趣的小伙伴抓紧试试吧 ! =_=
