<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运动一(分享栏)</title>
<style>
#div1{width: 150px; height: 200px; background: green; position: absolute;
left: -150px;}
#div1 span{position:absolute; width: 20px; height: 60px; background: blue;
right: -20px; top: 70px;}
</style>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
<script>
var speed=0;
var timer=null;
var oDiv1=document.getElementById('div1');
function move(target)//运动框架
{
if(oDiv1.offsetLeft<target)
speed=15;
else
speed=-15;
clearInterval(timer);
timer=setInterval(function()
{
if(oDiv1.offsetLeft==target)
{
clearInterval(timer);
}
else
{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
}
},30);}
oDiv1.οnmοuseοver=function()
{
move(0);
}
oDiv1.οnmοuseοut=function()
{
move(-150);
}
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-659624.html
