您的位置：首页 > Web前端 > JavaScript

javascript-动画

2016-12-15 16:35 141 查看

效果图

代码块
html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js 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 = 0;
if (obj.offsetLeft > target) {
speed = -10;
}else{
speed = 10;
}
if (obj.offsetLeft == target) {
clearInterval(timer);
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},30);
}
</script>

附件：http://down.51cto.com/data/2368486

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript-动画

相关文章推荐

新的分享

章节导航