JQuery 有一个 animate 属性 可以实现运动效果。下面我用js 实现 差不多的效果，用jQurey框架方法方便好多，不过封装js动画还是要学会。
首先先来看看一个?取style样式 也就计算后的样式，
|
1 2 3 4 5 6 7 8 9 10 |
function getStyle(obj,attr){ if(obj.currentStyle) //IE、Opera { return obj.currentStyle[attr]; } else //Firefox、chrome、safari { return getComputedStyle(obj,false)[attr]; } } |
// PS:??getComputedStyle(obj,false)在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。
运动框架
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
function startMove(obj,json,fn){ //var timer = null; clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true ; // 标杆 for(var attr in json) // 使用了json 的读取属性的特性 { var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); // Math.round 是为了去掉尾巴的浮点数不精确 }else{ icur = parseInt(getStyle(obj,attr)); } // 算速度 var speed = (json[attr] - icur) / 8; speed = speed >0 ?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){ flag = false; } // 为了让opacity 也有作用 加个判断 if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity=' + icur + speed + ')'; obj.style.opacity = (icur + speed) / 100; // filter:alpha(opacity:30); }else{ obj.style[attr] = icur + speed +"px"; } } // for in if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30) } |
这是某个效果使用的代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var oMove = document.getElementById("move"); var aList = oMove.getElementsByTagName('a'); for (var i = 0; i < aList.length; i++) { aList[i].onmouseover = function(){ var _this = this.getElementsByTagName("i")[0]; startMove(_this,{top:-10},function(){ _this.style.top = 20 +'px'; startMove(_this,{top:10,opacity:100}); }); } }; |
HTML
|
1 2 3 4 |
<div id="move"> <a href="#"><i><img src="game.png" alt="null"></i><p>游戏</p></a> <a href="#"><i><img src="game.png" alt="null"></i><p>游戏</p></a> </div> |