offsetWidth前添加负号有什么意义呢?我去掉这个负号时我的代码就出错

<!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" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

body,img,a,div,ul,li{margin: 0px;padding: 0px;}

          #div1{

           width: 600px;

           height: 100px;

           background: red;

           position: relative;

           overflow: hidden;

           margin:0px auto;

           margin-top: 100px;

          }

          #div1 ul{

           position: absolute;

           left: 0;

           top: 0;

          }

          #div1 ul li{

           list-style: none;

           float: left;

           width: 150px;

           height: 100px;

          }

          #div1 ul li img{

           width: 150px;

           height: 100px;

          }

          a{

          

           display:block;

           width: 50px;

           height: 50px;

           background: orange;

           float: left;

           margin:;

           


          }

</style>

<script type="text/javascript">

         window.onload=function(){

          var oDiv=document.getElementById('div1');

          var oUl=document.getElementById('ul1');

          var ali=document.getElementsByTagName('li');

          oUl.innerHTML+=oUl.innerHTML;

          oUl.style.width=ali[0].offsetWidth*ali.length+'px';

            var time=null;

            var speed=2;

           

     

            function move(){

             if(oUl.offsetLeft<-oUl.offsetWidth/2){

             oUl.style.left='0';

             

             }

             if(oUl.offsetLeft>0){

             oUl.style.left=-oUl.offsetWidth/2+'px';

         

             }

             oUl.style.left=oUl.offsetLeft+speed+'px';

            }

            time=setInterval(move,30);

            

            oDiv.onmousemove=function(){

             clearInterval(time);

            };

            oDiv.onmouseout=function(){

                 time=setInterval(move,30);

            };

            document.getElementsByTagName('a')[0].onclick=function(){

             speed=-2;

            };

             document.getElementsByTagName('a')[1].onclick=function(){

             speed=2;

            };

           

         };

</script>

</head>

<body>


<div id="div1">


<ul id="ul1">

<li ><img src="img/0.jpg"></li>

<li><img src="img/1.jpg"></li>

<li><img src="img/2.jpg"></li>

<li><img src="img/3.jpg"></li>

</ul>

</div>

<a href="javascript:;">向左走</a>

<a href="javascript:;">向右走</a>

</body>

</html>


qq_小柯_1
浏览 3329回答 2
2回答

echo_kinchao

因为是要算定位啊

慕男婶

因为 oUl.offsetLeft 得到的结果可能是负值。所以,在offsetWidth前面加了一个符号来比较大小。注意:offsetWidth只能是正值。因为取的是宽度嘛,宽度哪儿有负值?如果不加的话,正数是永远大于负数的
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript