标签：body obj style clear 电影 osi width math padding
function move(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; for(var attr in json){ //判断属性 if(attr == ‘opacity‘){ var stl = Math.round(parseFloat(getstyle(obj,attr))*100); var spd = (json[attr]-stl)>0?Math.ceil((json[attr]-stl)/10):Math.floor((json[attr]-stl)/10); } else{ var stl = parseInt(getstyle(obj,attr)); var spd = (json[attr]-stl)>0?Math.ceil((json[attr]-stl)/10):Math.floor((json[attr]-stl)/10); } //判断停止或运动 if(stl != json[attr]){ flag = false; if(attr == ‘opacity‘){ obj.style.filter = ‘alpha(opacity=‘+stl+obj.spd+‘)‘; obj.style.opacity = (stl+spd)/100; } else{ obj.style[attr] = stl+spd+‘px‘; } } } if(flag){ clearInterval(obj.timer); if(fn){fn();} } },30) } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }
实例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例</title> <style type="text/css"> *{margin:0;padding:0;} ul{padding:10px;list-style-type:none;width:234px;border:1px solid black;} li{display:inline-block;width:50px;height:50px;margin:10px;overflow:hidden;position:relative;border:1px solid red;} img{position:relative;top:6px;left:13px;opacity:1;} p{position:absolute;bottom:0;width:50px;height:20px;text-align:center;font-family:Microsoft Yahei;font-size:14px;color:red;} </style> <script>
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
//判断属性
if(attr == ‘opacity‘){
var stl = Math.round(parseFloat(getstyle(obj,attr))*100);
var spd = (json[attr]-stl)>0?Math.ceil((json[attr]-stl)/10):Math.floor((json[attr]-stl)/10);
}
else{
var stl = parseInt(getstyle(obj,attr));
var spd = (json[attr]-stl)>0?Math.ceil((json[attr]-stl)/10):Math.floor((json[attr]-stl)/10);
}
//判断停止或运动
if(stl != json[attr]){
flag = false;
if(attr == ‘opacity‘){
obj.style.filter = ‘alpha(opacity=‘+stl+obj.spd+‘)‘;
obj.style.opacity = (stl+spd)/100;
}
else{
obj.style[attr] = stl+spd+‘px‘;
}
}
}
if(flag){
clearInterval(obj.timer);
if(fn){fn();}
}
},30)
}
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script> <script> window.onload = function(){ var img = document.getElementsByTagName(‘img‘); for(var i = 0;i<img.length;i++){ img[i].onmouseover = function(){ var th = this; move(this,{top:-15,opacity:0},function(){ th.style.top = ‘15px‘; move(th,{top:6,opacity:100}); }); } } } </script> </head> <body> <ul> <li><img src=‘http://img.alicdn.com/tfs/TB1vQzVOVXXXXX4XpXXXXXXXXXX-220-1170.png‘ /><p>彩票</p></li> <li><img src=‘http://img.alicdn.com/tfs/TB1vQzVOVXXXXX4XpXXXXXXXXXX-220-1170.png‘ /><p>电影</p></li> <li><img src=‘http://img.alicdn.com/tfs/TB1vQzVOVXXXXX4XpXXXXXXXXXX-220-1170.png‘ /><p>游戏</p></li> <li><img src=‘http://img.alicdn.com/tfs/TB1vQzVOVXXXXX4XpXXXXXXXXXX-220-1170.png‘ /><p>充话费</p></li> <li><img src=‘http://img.alicdn.com/tfs/TB1vQzVOVXXXXX4XpXXXXXXXXXX-220-1170.png‘ /><p>旅行</p></li> <li><img src=‘http://img.alicdn.com/tfs/TB1vQzVOVXXXXX4XpXXXXXXXXXX-220-1170.png‘ /><p>酒店</p></li> </ul> </body> </html>
标签：body obj style clear 电影 osi width math padding
原文地址：http://www.cnblogs.com/oliverliu/p/6857749.html
