定时器及运动函数的使用。
<!--
Author: XiaoWen
Create a file: 2016-12-14 09:41:11
Last modified: 2016-12-14 10:11:53
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享到</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div id="box">
<div class="share">分享到</div>
</div>
<script>
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)
}
</script>
</body>
</html>