JS让div左右来回滚动,到达页面右端时,从右端回到左端,然后到达左端时,从左端到达右端

JavaScript09

JS让div左右来回滚动,到达页面右端时,从右端回到左端,然后到达左端时,从左端到达右端,第1张

在你原来的代码上进行了修改,加粗倾斜的部分是添加或者修改的位置

<script>

  var timer1 = null

  var el = null

  var left = 1

  function moveItRight() {

      if (parseInt(el.style.left) >(screen.width - 50)) //el.style.left = 0

        {

            left = -1

        }

        else if (parseInt(el.style.left) <= 0) {

            left = 1

        }

        el.style.left = parseInt(el.style.left) + 2 * left + 'px'//本题目最关键的一句代码,让el对象的左边距每次循环都增加2像素,也就是向右移动了2像素

      timer1 = setTimeout(moveItRight, 25)//隔25毫秒后运行一次moveItRight函数

  }

  window.onload = function () {

      el = document.getElementById("div1")

      el.style.left = '500px'

      moveItRight()

  }

</script>

用jquery写的,代码很简洁:

<script src="jquery.js"></script>

<script>

function AutoScroll(obj){

$(obj).find("ul:first").animate({

marginTop:"-25px"

},500,function(){

$(this).css().find("li:first").appendTo(this)

})

}

$(document).ready(function(){

setInterval('AutoScroll("#scrollDiv")',2000)

)}

</script>

<div id="scrollDiv">

<ul>

<li>滚动内容</li>

</ul>

</div>

希望对你有所帮助

<script type="text/javascript">

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

demo的css一定要设定width和overflow:hidden

<div id="demo">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<div id="demo1">

<table width="1000" height="172" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

文字放这里

</td>

</tr>

</table>

</div>

</td>

<td>

<div id="demo2"></div>

</td>

</tr>

</table>

</div>

原理demo2复制demo1然后连成一行,demo1滚动完滚动demo2因为内容一样所以看不出来,demo2滚动完滚动demo1