实用的文本和图片无缝滚动效果 

  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">
  3 <head>
  4 <title>中国站长天空-网页特效-综合特效-实用的文本和图片无缝滚动效果</title>
  5 <meta http-equiv="content-type" content="text/html;charset=gb2312">
  6 <!--把下面代码加到<head>与</head>之间-->
  7 <style type="text/css">
  8 html,body,div,img,h1,h2,h3,h4,h5,h6{
  9     vertical-align:baselinebaseline;
 10     font-family:inherit;
 11     font-weight:inherit;
 12     font-style:inherit;
 13     font-size:100%;
 14     outline:0;
 15     padding:0;
 16     margin:0;
 17     border:0;
 18 }
 19 body{
 20     font-family:"宋体";
 21     background:#e0e3ec url(http://www.zzsky.cn/effect/images/20123/272250/bg.jpg) repeat top left;
 22     font-weight:400;
 23     font-size:15px;
 24     color:#393b40;
 25 }
 26 a{
 27     color:#333;
 28     text-decoration:none;
 29 }
 30 .container{
 31     width:100%;
 32     position:relative;
 33     text-align:center;
 34 }
 35 h1{
 36     line-height:60px;
 37     font-size:22px;
 38     clear:both;
 39 }
 40 h2{
 41     padding-top:20px;
 42     line-height:40px;
 43     font-weight:bolder;
 44 }
 45 .main{
 46     width:1001px;
 47     margin: 10px auto 30px auto;
 48 }
 49 .content{
 50     background:#FFFFFF;
 51     border:1px solid #eaeaea;
 52     padding:20px 0;
 53 }
 54 #newsbox{
 55     height:150px;
 56     overflow:hidden;
 57     border:1px solid #e1e1e1;
 58     width:350px;
 59     margin:0 auto;
 60 }
 61 #newslist li{
 62     line-height:25px;
 63     text-align:left;
 64     padding-left:15px;
 65 }
 66 table{
 67     margin:0 auto;
 68     border:1px solid #e1e1e1;
 69 }
 70 #probox{
 71     width:700px;
 72     overflow:hidden;
 73     height:190px;
 74     padding:15px 0;
 75 }
 76 #prolist{
 77     width:1500px;
 78 }
 79 #prolist li{
 80     float:left;
 81     text-align:center;
 82     line-height:25px;
 83 }
 84 #left,#right{
 85     cursor:pointer;
 86 }
 87 </style>
 88 <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20123/272250/chaomao.js"></script>
 89 </head>
 90 <body>
 91 <!--把下面代码加到<body>与</body>之间--> 
 92 <div class="container">
 93     <div class="main">
 94         <h1>无缝滚动</h1>
 95         <h2>无缝滚动实例1</h2>
 96         <div class="content">
 97             <div id="newsbox">
 98                 <ul id="newslist">
 99                     <li>我是javasscript100插件无缝滚动功能</li>
100                     <li>我是无缝滚动的哦</li>
101                     <li>我的滚动间隔是3秒</li>
102                     <li>我没有拖动按钮</li>
103                     <li>我的滚动方向是从上向下滚动的</li>
104                     <li>我是javasscript100插件无缝滚动功能</li>
105                     <li>我是javasscript100插件无缝滚动功能</li>
106                     <li>我是javasscript100插件无缝滚动功能</li>
107                     <li>我是javasscript100插件无缝滚动功能</li>
108                     <li>我是javasscript100插件无缝滚动功能</li>
109                 </ul>
110             </div>
111         </div>
112         <h2>无缝滚动实例2</h2>
113         <div class="content">
114             <table align="center">
115                 <tr>
116                     <td id="left"><img src="http://www.zzsky.cn/effect/images/20123/272250/left.jpg"></td>
117                     <td>
118                         <div id="probox">
119                             <ul id="prolist">
120                                 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad1</li>
121                                 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad2</li>
122                                 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad3</li>
123                                 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad4</li>
124                                 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad5</li>
125                                 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad6</li>
126                             </ul>
127                         </div>
128                     </td>
129                     <td id="right"><img src="http://www.zzsky.cn/effect/images/20123/272250/rihgt.jpg"></td>
130                 </tr>
131             </table>
132         </div>
133     </div>
134 </div>
135 <script type="text/javascript">
136 js100(function(){
137     Javascript100.scroll({box:"newsbox",list:"newslist",direction:"top",spacing:3000});
138     Javascript100.scroll({box:"probox",list:"prolist",advanceArrow:"left",retreatArrow:"right"});
139 });
140 </script>
141 </body>
142 </html>

 

posted @ 2015-10-21 19:31  flay  阅读(256)  评论(0)    收藏  举报