内部分享栏

最新推荐文章于 2021-11-24 16:17:07 发布

jingtian678

最新推荐文章于 2021-11-24 16:17:07 发布

阅读量622

点赞数

分类专栏： web大前端

本文链接：https://blog.csdn.net/jingtian678/article/details/54868942

版权

web大前端专栏收录该内容

291 篇文章 9 订阅

订阅专栏

<!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>