天天看點

向上下左右滾動圖檔的特效

<!--下面是向上滾動代碼-->
<div id=butong_net_top style=overflow:hidden;height:100;width:90;>
 <div id=butong_net_top1>
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 </div>
 <div id=butong_net_top2></div>
 </div>
 <script>
 var speed=30
 butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top1為butong_net_top2
 function Marquee1(){
 //當滾動至butong_net_top1與butong_net_top2交界時
 if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)  
 butong_net_top.scrollTop-=butong_net_top1.offsetHeight //butong_net_top跳到最頂端
 else{
 butong_net_top.scrollTop++;
 }
 }
 var MyMar1=setInterval(Marquee1,speed)//設定定時器
 //滑鼠移上時清除定時器達到滾動停止的目的
 butong_net_top.οnmοuseοver=function() {clearInterval(MyMar1)}
 //滑鼠移開時重設定時器
 butong_net_top.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
 </script><!--向上滾動代碼結束-->
<br>
<!--下面是向下滾動代碼-->
<div id=butong_net_bottom style=overflow:hidden;height:100;width:90;>
 <div id=butong_net_bottom1>
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 <img src="http://butong.net/images/logo88.gif">
 </div>
 <div id=butong_net_bottom2></div>
 </div>
 <script>
 var speed=30
 butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML
 butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight
 function Marquee2(){
 if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)
 butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
 else{
 butong_net_bottom.scrollTop--
 }
 }
 var MyMar2=setInterval(Marquee2,speed)
 butong_net_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}
 butong_net_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
 </script><!--向下滾動代碼結束-->
<br>
<!--下面是向左滾動代碼-->
<div id="butong_net_left" style="overflow:hidden;width:500px;">
 <table cellpadding="0" cellspacing="0" border="0">
 <tr><td id="butong_net_left1" valign="top" align="center">
 <table cellpadding="2" cellspacing="0" border="0">
 <tr align="center">
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td><td><img src="http://butong.net/images/logo88.gif" width="88"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 </tr>
 </table>
 </td>
 <td id="butong_net_left2" valign="top"></td>
 </tr>
 </table>
 </div>
 <script>
 var speed=30//速度數值越大速度越慢
 butong_net_left2.innerHTML=butong_net_left1.innerHTML
 function Marquee3(){
 if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
 butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
 else{
 butong_net_left.scrollLeft++
 }
 }
 var MyMar3=setInterval(Marquee3,speed)
 butong_net_left.οnmοuseοver=function() {clearInterval(MyMar3)}
 butong_net_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
 </script><!--向左滾動代碼結束-->
<br>
<!--下面是向右滾動代碼-->
<div id="butong_net_right" style="overflow:hidden;width:500px;">
 <table cellpadding="0" cellspacing="0" border="0">
 <tr><td id="butong_net_right1" valign="top" align="center">
 <table cellpadding="2" cellspacing="0" border="0">
 <tr align="center">
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 <td><img src="http://butong.net/images/logo88.gif"></td>
 </tr>
 </table>
 </td>
 <td id="butong_net_right2" valign="top"></td>
 </tr>
 </table>
 </div>
 <script>
 var speed=30//速度數值越大速度越慢
 butong_net_right2.innerHTML=butong_net_right1.innerHTML
 function Marquee4(){
 if(butong_net_right.scrollLeft<=0)
 butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
 else{
 butong_net_right.scrollLeft--
 }
 }
 var MyMar4=setInterval(Marquee4,speed)
 butong_net_right.οnmοuseοver=function() {clearInterval(MyMar4)}
 butong_net_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
 </script><!--向右滾動代碼結束-->


​​http://www.butong.net/img/index.htm​​