腾讯JS商品滚动效果_图片特效特效

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

<HTML>
<HEAD>
<TITLE>腾讯商品滚动效果</TITLE>
<META http-equiv=Content-Type mrc="text/html; charset=gb2312">
<STYLE>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
}
</STYLE>
            <TABLE cellSpacing=0 cellPadding=0 width=285 border=0>
              <TBODY>
              <TR>
                <TD align=middle width=20><IMG onMouseOver="moveThis('left')" 
                  style="CURSOR: pointer" onmouseout=moveout() height=30 
                  src="http://p1.mb5u.com/texiao/1/20110225160456221.gif" width=8></TD>
                <TD>
                  <DIV id=demo 
                  style="OVERFLOW: hidden; WIDTH: 255px; HEIGHT: 78px">
                  <TABLE cellSpacing=0 cellPadding=0 border=0>
                    <TBODY>
                    <TR>
                      <TD id=demo1>
                        <TABLE id=demo3 style="MARGIN-LEFT: 0px" cellSpacing=0 
                        cellPadding=0 width=459 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=40 
                              src="http://p1.mb5u.com/texiao/1/20110225160456222.gif" width=44 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456223.gif" width=38 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456224.gif" width=37 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456225.gif" width=37 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456226.gif" width=38 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456227.gif" width=37 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456228.gif" width=37 
                              border=0></A></TD>
                            <TD align=middle width=51><A 
                              href="#" 
                              target=_blank><IMG height=38 src="http://p1.mb5u.com/texiao/1/20110225160456229.gif" width=32 
                              border=0></A></TD></TR>
                          <TR>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>手机</A><BR><SPAN 
                            class=fcorg>6折</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>MP4</A><BR><SPAN 
                              class=fcorg>99元</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>电玩</A><BR><SPAN 
                            class=fcorg>6折</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>网游</A><BR><SPAN 
                            class=fcorg>5折</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>戒指</A><BR><SPAN 
                              class=fcorg>38元</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>单反</A><BR><SPAN 
                            class=fcorg>6折</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>足球鞋</A><BR><SPAN 
                              class=fcorg>109元</SPAN></TD>
                            <TD align=middle><A class=l000 
                              href="#" 
                              target=_blank>秋装</A><BR><SPAN 
                              class=fcorg>39元</SPAN></TD></TR></TBODY></TABLE>
					  </TD>
                      <TD id=demo2></TD></TR></TBODY></TABLE></DIV>
				</TD>
                <TD align=middle width=20><IMG onMouseOver="moveThis('right')" 
                  style="CURSOR: pointer" onmouseout=moveout() height=30 
                  src="http://p1.mb5u.com/texiao/1/20110225160456230.gif" width=8></TD></TR></TBODY></TABLE>
            <SCRIPT language=javascript>
function $(v){return document.getElementById(v);}
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function MarqueeL(){
	if(demo2.offsetWidth-demo.scrollLeft<=0)
		demo.scrollLeft-=demo1.offsetWidth;
	else
		demo.scrollLeft++;
}
function MarqueeR(){
	if(demo2.offsetWidth-demo.scrollLeft>=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)}
}  
</SCRIPT>
</BODY>
</HTML>

所属频道：图片特效特效/更新时间：2012-12-06

[收藏][报错][返回列表]

腾讯JS商品滚动效果_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些