Javascript物体运动(单物体运动)
//侧边栏分享示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动动画效果</title>
<style>
*{margin:0px;padding: 0px;font-size: 14px;clear: both;}
#div1{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
filter:alpha(opacity:30);//设置图层透明度
left: -200px;
position: relative;
top: 0px;
}
#share{
width: 20px;
height: 50px;
background-color: blue;
font-family: '微软雅黑';
position: absolute;
left: 200px;
text-align: center;
top: 75px;
}
</style>
<script>
/**
* 描述物体进行运动的状态
* @return {startMove(itarget);} 运动函数
*/
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(0);
}
oDiv.onmouseout = function(){
startMove(-200);
}
}
//获取id
function getdiv(){
var oDiv = document.getElementById('div1');
}
var timer = null;
function startMove(itarget,fn){
var oDiv = document.getElementById('div1');
// getdiv();
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft > itarget){
speed = -10;
}else if(oDiv.offsetLeft < itarget){
speed = 10;
}else{
speed = 0;
}
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}, 30);
}
</script>
</head>
<body>
<div id="div1"><span id='share'>分享</span></div>
</body>
</html>
评论