萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js+div實現圖片滾動效果代碼

js+div實現圖片滾動效果代碼

 本篇文章主要是對js+div實現圖片滾動效果的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

橫向  <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"    onmouseout="doscroll()">  <div id="demo1" style="white-space:nowrap;padding:0;">  <a href="javascript:alert('發表新貼');"><img src="圖片URL" height=20 width=104    border=0></a>  <a href="javascript:alert('發表回復');"><img src="圖片URL" height=20 width=104    border=0></a>  </div>  </div>  <!--滾動的javascript-->  <script>  var t=demo.scrollWidth  demo1.innerHTML+=demo1.innerHTML  function doMarquee()  {  demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth  }  function doscroll()  {     sc=setInterval(doMarquee,20)  }  function stopscroll()  {     clearInterval(sc)  }  doscroll()  </script>  <!--滾動的javascript結束-->      縱向  <div id="demo" style="height:110px; overflow:hidden ">  <div id="demo1">  <a href="javascript:alert('發表新貼');"><img src="圖片URL" height=20 width=104    border=0></a>  <a href="javascript:alert('發表回復');"><img src="圖片URL" height=20 width=104    border=0></a>  </div><div id="demo2"></div>  <!--滾動的javascript-->  <script>  var speed=100  demo2.innerHTML=demo1.innerHTML  function Marquees(){  if(demo2.offsetTop-demo.scrollTop<=0)  demo.scrollTop-=demo1.offsetHeight  else{  demo.scrollTop++  }  }  var MyMars=setInterval(Marquees,speed)  demo.onmouseover=function() { clearInterval(MyMars) }  demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }  zlselect('6');  </script><!--滾動的javascript結束-->  </div>   
copyright © 萬盛學電腦網 all rights reserved