<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分享到</title>
<style>
#div1
{
width: 100px;
height: 200px;
background-color: red;
position: absolute;
left: -100px;
}
#div1 span
{
width: 30px;
height: 70px;
background-color: yellow;
position: absolute;
left: 100px;
top:50px;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv = document.getElementById('div1');
oDiv.onmouseover=function ()
{
startMove(0);
}
oDiv.onmouseout=function ()
{
startMove(-100);
}
}
var timer=null;
function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function () {
var iSpeed=0;
if(oDiv.offsetLeft < iTarget)
{
iSpeed = 10;
}
else
{
iSpeed = -10;
}
if(oDiv.offetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft + iSpeed + 'px';
}
},200);
}
</script>
</head>
<body>
<div id="div1">
<span></span>
</div>
</body>
</html>
为什么这个导航栏左右摇摆?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- `奋力前行 2019-01-16 14:51关注
if(oDiv.offsetLeft < iTarget)
{
iSpeed = 10;
}
else if(oDiv.offsetLeft > iTarget)
{
iSpeed = -10;
}本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 高价求中通快递查询接口
- ¥15 解决一个加好友限制问题 或者有好的方案
- ¥15 关于#java#的问题,请各位专家解答!
- ¥15 急matlab编程仿真二阶震荡系统
- ¥20 TEC-9的数据通路实验
- ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
- ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
- ¥15 python如何将动态的多个子列表,拼接后进行集合的交集
- ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
- ¥15 如何实现H5在QQ平台上的二次分享卡片效果?