为了账号安全,请及时绑定邮箱和手机立即绑定

求大神帮我看看为什么移出移入速度为什么不同,并且还停不下来

求大神帮我看看为什么移出移入速度为什么不同,并且还停不下来

qq_吃药先森_03169839 2016-05-06 15:44:14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">all{ margin:0; padding:0;}div{ background-color:red; width:200px; height:300px; left:-200px; position:relative;}span{ background-color:blue;width:20px; height:40px; position:absolute;left:200px; color:#FFF; top:75px;}</style><script>window.onload=function(){    var timer=null,        a=document.getElementById('a');        a.onmouseover=function(){        Move(10,0);    }    a.onmouseout=function(){        Move(-10,-200);        }    function Move(speed,num){        clearInterval(timer);        a=document.getElementById('a');        timer=setInterval(function(){            if(a.offsetLeft == num)            {                clearInterval(timer);                        }            else{                a.style.left=a.offsetLeft+ speed +'px';                }            },30);        }    }</script><title>无标题文档</title></head><div id="a"><span id="box">分享</span></div><body></body></html>
查看完整描述

2 回答

已采纳
?
qq_青枣工作室_0

TA贡献446条经验 获得超754个赞

div{ background-color:red; width:200px; height:300px; left:-200px; position:relative;}

这里的 position:relative 要改为 position:absolute;


查看完整回答
2 反对 回复 2016-05-06
  • qq_吃药先森_03169839
    qq_吃药先森_03169839
    实现了!谢谢你,可以跟我讲一下具体的原理么。
  • qq_青枣工作室_0
    qq_青枣工作室_0
    因为你的 all{ margin:0; padding:0;} 写错了,导致在position:relative时,a.offsetLeft跟a.style.left的值不同。改为 *{margin:0; padding:0},可保留原来的 position:relative
?
ssddwds

TA贡献3条经验 获得超0个赞

div{ background-color:red; width:200px; height:300px; left:-200px; position:absolute;}

span{ background-color:blue;width:20px; height:40px; position:absolute;left:200px; color:#FFF; top:75px;}

 我猜你是要这种效果吧,div的position改成absolute

查看完整回答
反对 回复 2016-05-06
  • 2 回答
  • 0 关注
  • 1197 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信