DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js+div實現圖片滾動效果代碼
js+div實現圖片滾動效果代碼
編輯:JavaScript綜合知識     

 本篇文章主要是對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>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved