效果图
代码块
html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js buffer animation</title>
</head>
<body>
<div id="container">
<span id="share">分享</span>
</div>
</body>
</html>
css样式:
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 200px;
height: 200px;
background-color: #8B0000;
position: relative;
left: -200px;
top: 0px;
cursor: pointer;
}
#container span{
width: 20px;
height: 100px;
background-color: #008B8B;
position: absolute;
left: 200px;
top: 50px;
cursor: pointer;
}
</style>
javascript脚本:
<script>
window.onload = function (){
var objContainer = document.getElementById("container");
objContainer. = function (){
myanimation(objContainer,0);
}
objContainer. = function (){
myanimation(objContainer,-200);
}
}
var timer = null;
function myanimation(obj,target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target - obj.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetLeft == target) {
clearInterval(timer);
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},30);
}
</script>