柚子快报激活码778899分享:js运动:分享到
定时器及运动函数的使用。
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
position: fixed;
top: 40px;
left: -100px;
background: #ccc;
}
#box .share{
width: 20px;
height: 60px;
background: #f00;
position: absolute;
right: -20px;
top: 20px;
}
var box=document.getElementById("box");
var share=box.getElementsByClassName("share")[0];
box.onmouseover=function(){
move(box,'left',0)
}
box.onmouseout=function(){
move(box,'left',-100)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
var timer=null;
function move(obj,attr,iTarget){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;
speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(iTarget==parseInt(getStyle(obj,attr))){
clearInterval(obj.timer);
}else{
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
}
},10)
}
柚子快报激活码778899分享:js运动:分享到
推荐文章
发表评论