无缝滚动图片示例(上、下、左、右)

代码 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2  <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>无缝滚动图片示例</title>
  6     <style type="text/css">
  7         ul
  8         {
  9             list-style: none;
 10             padding: 0px;
 11             margin: 0px;
 12         }
 13         #demo1 ul, #demo2 ul
 14         {
 15             width: 400px;
 16         }
 17         #demo1 li, #demo2 li
 18         {
 19             float: left;
 20         }
 21     </style>
 22 
 23     <script type="text/javascript">
 24             function $(id){
 25                 return document.getElementById(id);
 26             }
 27             function Marquee(id,toFollow,speed)
 28             {
 29                 var doScroll;
 30                 var scrollBox_x="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
 31                 var scrollBox_y="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td></tr><tr><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
 32                 var begin=function(){
 33                     switch(toFollow){
 34                         case "left":
 35                             $(id).innerHTML=scrollBox_x;
 36                             doScroll=setInterval(function(){
 37                                 if($(id).scrollLeft==$(id+"abox").offsetWidth) $(id).scrollLeft=0;
 38                                 $(id).scrollLeft++;
 39                             },speed);
 40                             break;
 41                         case "right":
 42                             $(id).innerHTML=scrollBox_x;
 43                             doScroll=setInterval(function(){
 44                                 if($(id).scrollLeft<=0) $(id).scrollLeft=$(id+"bbox").offsetWidth;
 45                                 $(id).scrollLeft--;
 46                             },speed);
 47                             break;
 48                         case "top":
 49                             $(id).innerHTML=scrollBox_y;
 50                             doScroll=setInterval(function(){
 51                                 if($(id).scrollTop==$(id+"abox").offsetHeight) $(id).scrollTop=0;
 52                                 $(id).scrollTop++;
 53                             },speed);
 54                             break;
 55                         case "bottom":
 56                             $(id).innerHTML=scrollBox_y;
 57                             doScroll=setInterval(function(){
 58                                 if($(id).scrollTop<=0) $(id).scrollTop=$(id+"bbox").offsetHeight;
 59                                 $(id).scrollTop--;
 60                             },speed);
 61                             break;
 62                         }
 63                     }
 64                     begin();
 65                     $(id).onmouseover=function() {clearInterval(doScroll);}
 66                     $(id).onmouseout=function() {begin();}
 67                 }
 68                 window.onload=function(){
 69                     Marquee("demo2","left",30);
 70                     Marquee("demo1","right",20);
 71                     Marquee("demo3","top",30);
 72                     Marquee("demo4","bottom",30);
 73                 }
 74        
 75     </script>
 76 
 77 </head>
 78 <body>
 79     <div id="demo1" style="overflow: hidden; height: 100px; width: 300px;">
 80         <ul>
 81             <li>
 82                 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; width: 200px;" /></li>
 83             <li>
 84                 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; width: 200px;" /></li>
 85         </ul>
 86     </div>
 87     <br />
 88     <div id="demo2" style="overflow: hidden; height: 100px; width: 300px;">
 89         <ul>
 90             <li>
 91                 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; width: 200px;" /></li>
 92             <li>
 93                 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; width: 200px;" /></li>
 94         </ul>
 95     </div>
 96     <br />
 97     <div id="demo3" style="overflow: hidden; height: 150px; width: 200px;">
 98         <ul>
 99             <li>
100                 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; width: 200px;" /></li>
101             <li>
102                 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; width: 200px;" /></li>
103         </ul>
104     </div>
105     <br />
106     <div id="demo4" style="overflow: hidden; height: 150px; width: 200px;">
107         <ul>
108             <li>
109                 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; width: 200px;" /></li>
110             <li>
111                 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; width: 200px;" /></li>
112         </ul>
113     </div>
114 </body>
115 </html>
116

 

posted @ 2010-02-02 12:53  yangan-wu2008  阅读(249)  评论(0)  编辑  收藏  举报