JS+CSS防腾讯网商品滚动效果代码

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 472 次

代码简介：来自腾讯网商品滚动特效，引用了远程的图片和文字，请下载到本地，总之效果还是不错的，美观，占用位置少。布局灵活。代码内容：ViewCode&lt!DOCTYPEHTMLPUBLIC&q

代码简介：

来自腾讯网商品滚动特效，引用了远程的图片和文字，请下载到本地，总之效果还是不错的，美观，占用位置少。布局灵活。

代码内容：

View Code

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;  &lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;JS+CSS防腾讯网商品滚动效果代码 - www.webdm.cn&lt;/TITLE&gt;  &lt;META http-equiv=Content-Type content="text/html; charset=gb2312"&gt;  &lt;STYLE&gt;BODY {      FONT-SIZE: 12px; LINE-HEIGHT: 20px  }  TABLE {      FONT-SIZE: 12px; LINE-HEIGHT: 20px  }  .fcorg {      COLOR: #f60  }  .l000 {      COLOR: #000  }  A.l000:link {      COLOR: #000  }  A.l000:visited {      COLOR: #000  }  &lt;/STYLE&gt;              &lt;TABLE cellSpacing=0 cellPadding=0 width=285 border=0&gt;                &lt;TBODY&gt;                &lt;TR&gt;                  &lt;TD align=middle width=20&gt;&lt;IMG onMouseOver="moveThis('left')"                     style="CURSOR: pointer" onmouseout=moveout() height=30                     src="http://www.webdm.cn/images/20091005/6637716.gif" width=8&gt;&lt;/TD&gt;                  &lt;TD&gt;                    &lt;DIV id=demo                     style="OVERFLOW: hidden; WIDTH: 255px; HEIGHT: 78px"&gt;                    &lt;TABLE cellSpacing=0 cellPadding=0 border=0&gt;                      &lt;TBODY&gt;                      &lt;TR&gt;                        &lt;TD id=demo1&gt;                          &lt;TABLE id=demo3 style="MARGIN-LEFT: 0px" cellSpacing=0                           cellPadding=0 width=459 border=0&gt;                            &lt;TBODY&gt;                            &lt;TR&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="/"                                 target=_blank&gt;&lt;IMG height=40                                 src="http://www.webdm.cn/images/20091005/mobile_0904.gif" width=44                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="http://digital.paipai.com/sale/summer?ADTAG=346.2.1"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/070417_mp3.gif" width=38                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="http://game.paipai.com/sale/yz/electric_d.shtml?ADTAG=112.20.3"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/071019game1.gif" width=37                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="http://game.paipai.com/?ADTAG=112.20.4"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/20070404_img9_4.gif" width=37                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="http://lady.paipai.com/?ADTAG=112.20.5"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/20070404_img9_6.gif" width=38                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="#"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/071019game2.gif" width=37                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="http://sports.paipai.com/?ADTAG=112.20.8"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/070913_2.gif" width=37                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;                              &lt;TD align=middle width=51&gt;&lt;A                                 href="http://sports.paipai.com/?ADTAG=112.20.8"                                 target=_blank&gt;&lt;IMG height=38 src="http://www.webdm.cn/images/20091005/070913_1.gif" width=32                                 border=0&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;                            &lt;TR&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://digital.paipai.com/sale/term/?PTAG=10001.2.12"                                 target=_blank&gt;手机&lt;/A&gt;&lt;BR&gt;&lt;SPAN                               class=fcorg&gt;6折&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://digital.paipai.com/sale/summer?ADTAG=346.2.1"                                 target=_blank&gt;MP4&lt;/A&gt;&lt;BR&gt;&lt;SPAN                                 class=fcorg&gt;99元&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://game.paipai.com/sale/yz/electric_d.shtml?ADTAG=112.20.3"                                 target=_blank&gt;电玩&lt;/A&gt;&lt;BR&gt;&lt;SPAN                               class=fcorg&gt;6折&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://game.paipai.com/?ADTAG=112.20.4"                                 target=_blank&gt;网游&lt;/A&gt;&lt;BR&gt;&lt;SPAN                               class=fcorg&gt;5折&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://lady.paipai.com/?ADTAG=112.20.5"                                 target=_blank&gt;戒指&lt;/A&gt;&lt;BR&gt;&lt;SPAN                                 class=fcorg&gt;38元&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="#"                                 target=_blank&gt;单反&lt;/A&gt;&lt;BR&gt;&lt;SPAN                               class=fcorg&gt;6折&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://sports.paipai.com/?ADTAG=112.20.8"                                 target=_blank&gt;足球鞋&lt;/A&gt;&lt;BR&gt;&lt;SPAN                                 class=fcorg&gt;109元&lt;/SPAN&gt;&lt;/TD&gt;                              &lt;TD align=middle&gt;&lt;A class=l000                                 href="http://sports.paipai.com/?ADTAG=112.20.8"                                 target=_blank&gt;秋装&lt;/A&gt;&lt;BR&gt;&lt;SPAN                                 class=fcorg&gt;39元&lt;/SPAN&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;                        &lt;/TD&gt;                        &lt;TD id=demo2&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;                  &lt;/TD&gt;                  &lt;TD align=middle width=20&gt;&lt;IMG onMouseOver="moveThis('right')"                     style="CURSOR: pointer" onmouseout=moveout() height=30                     src="http://www.webdm.cn/images/20091005/6637743.gif" width=8&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;              &lt;SCRIPT language=javascript&gt;  function $(v){return document.getElementById(v);}     var speed=30;  demo2.innerHTML=demo1.innerHTML;  function MarqueeL(){      if(demo2.offsetWidth-demo.scrollLeft&lt;=0)          demo.scrollLeft-=demo1.offsetWidth;      else          demo.scrollLeft++;  }  function MarqueeR(){      if(demo2.offsetWidth-demo.scrollLeft&gt;=255)          demo.scrollLeft+=demo1.offsetWidth;      else          demo.scrollLeft--;  }  var flag=0;  var MyMar;  //var MyMar=setInterval(MarqueeL,speed);  demo.onmouseover=function() {if(MyMar){clearInterval(MyMar)}}  //demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}      function moveout(way)  {          if(MyMar)          {              clearInterval(MyMar);          }  }  function moveThis(way){       if(way=='right'){           flag=1;          if(MyMar)          {              clearInterval(MyMar);          }          MyMar=setInterval(MarqueeR,speed);      }      else{           flag=0;          if(MyMar)          {              clearInterval(MyMar);          }          MyMar=setInterval(MarqueeL,speed);      }          if(flag) demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}          else demo.onmouseout=function() {MyMar=setInterval(MarqueeL,speed)}  }         &lt;/SCRIPT&gt;  &lt;/BODY&gt;&lt;/HTML&gt;  &lt;br /&gt;  &lt;p&gt;&lt;a href="http://www.webdm.cn"&gt;网页代码站&lt;/a&gt; - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&lt;/

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。