Chinapromoter Blog

生活, 艺术, 网络, 技术, 工业, 消费, 记录趣味生活的点点滴滴。

« UTF-8编码导致无组件上传图片出现问题 - SXWO EC 程序优化实现在点击图片下载链接时弹出一个下载窗口的ASP解决方案 »

同一个方向图片连续滚动特效(网络转载)

多张图片自右向左循环滚动显示,当鼠标移动到图片上时图片停止滚动,当鼠标移到图片以外区域时,图片继续自右向左循环滚动。每张图上都可添加链接引向不同位置的帖子。

代码:

这段代码不是原创,而是我从其他网页上截取的代码片断,根据自己需要做了修改,并且添加了注释。

绿色部分是注释,蓝色部分是Javascript代码,其余是html代码。

拷贝代码使用时,绿色注释部分需删除,否则影响代码效果。因为搜狐论坛不能完整显示网页代码,因此我用中文尖括号<>替代英文尖括号,以便代码可以正常显示。拷贝代码使用时,所有尖括号<请替换成<,所有尖括号>请替换成>。

 //定义图片滚动区域宽度,具体宽度913可根据需要更改,但要保证所有小图片宽度之和大于滚动区域宽度。
 //注意id=scrollpic这部分不要更改,会被下面的JavaScript代码用到
 <div id=scrollpic style=overflow: hidden; width:913px;>
  
  <table cellspacing=0 cellpadding=0 align=center border=0>
   <tr>

    //注意id=scrollpic1这部分不要更改,会被下面的JavaScript代码用到
    <td id=scrollpic1>
     <table border=0 cellpadding=0 cellspacing=0>
      <tr>
      <tr>

       //定义图1地址,图1的具体图片地址可根据需要更改
       //例:src=图1地址
       <td width=185 ><img src=http://image1.club.sohu.com/pic/02/06/hxzy38a37ad660911a22.jpg /></td>

       //定义图2地址,图2的具体图片地址可根据需要更改
       //例:src=图2地址
       <td width=185 ><img src=http://image1.club.sohu.com/pic/df/2e/hxzycd25c5d21ec914fa.jpg /></td>

       //定义图3-图10地址,图3-图10的具体图片地址可根据需要分别更改
       //例:src=图3地址
       <td width=185 ><img src=http://image1.club.sohu.com/pic/86/7c/hxzy1d6b9dbd31037dd7.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/e4/87/hxzy8a23effe3f101f4b.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/e5/f8/hxzy3c238da78778cd67.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/74/78/hxzya257d79c0c8f5635.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/95/09/hxzy89a7cc1d2f4444ea.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/63/64/hxzy9644fc02748b3064.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/54/7c/hxzy62056924145d076f.jpg /></td>
       <td width=185 ><img src=http://image1.club.sohu.com/pic/b0/bc/hxzy3530eaebb527a0b8.jpg /></td>

      </tr>
     </table>
    </td>

   //注意id=scrollpic2这部分不要更改,会被下面的JavaScript代码用到
   <td id=scrollpic2></td>

   </tr>
  </table>
 </div>

<script type=text/javascript>

 //定义图片滚动速度,具体速度15可根据需要更改
 var speed=15;

 //定义图片滚动方向,自右向左水平滚动,无需修改,直接拷贝即可
 scrollpic2.innerHTML=scrollpic1.innerHTML;
 function Marquee()
 {
  if(scrollpic2.offsetWidth-scrollpic.scrollLeft<=0)
   scrollpic.scrollLeft-=scrollpic1.offsetWidth;
  else
   scrollpic.scrollLeft++;
 }
 var MyMar=setInterval(Marquee,speed);
 scrollpic.onmouseover=function() {clearInterval(MyMar);}
 scrollpic.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>

来源:http://club.yule.sohu.com/read_elite.php?b=bjbzk&a=5638944

 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表


Powered By Z-Blog 1.8 Spirit Build 80605

Copyright www.chinapromoter.cn. Some Rights Reserved. 浙ICP备05022498号