可以左右滚动的一行内容，必须手动点击后左右滚动，可以一直循环滚动，没有终点

corangecn

浏览: 60662 次

最近访客更多访客>>

like7788250

tangjing19891205

CvShrimp

hapet

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (64)

社区版块

存档分类

可以左右滚动的一行内容，必须手动点击后左右滚动，可以一直循环滚动，没有终点
先看图

http://www.corange.cn//uploadfiles/060701_54846.jpg

演示地址http://www.corange.cn/demo/3649/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
原本的css文件调用方式
<SCRIPT type=text/javascript>
(function(){var _sn=["base","pshow"];var _su="http://misc.360buyimg.com/201006/skin/df/";var _sw=screen.width;var _se,_st;for (i in _sn){_se=document.createElement("link");_se.type="text/css";_se.rel="stylesheet";if (_sw>=1280){_st=_su+_sn[i]+".w.css";}else{_st=_su+_sn[i]+".css";}_se.href=_st;document.getElementsByTagName("head")[0].appendChild(_se);}})()
</SCRIPT>
改为如下的，注意在低分辨率有点问题，可以按照上面的改一下
<link type="text/css" rel="stylesheet" href="360buy/pshow.w.css"/>
<link type="text/css" rel="stylesheet" href="360buy/base.w.css"/>

<SCRIPT
src="360buy/jquery-1.2.6.pack.js"
type=text/javascript></SCRIPT>

<SCRIPT
src="360buy/g.base.js"
type=text/javascript></SCRIPT>
</HEAD>

<DIV class=m id=co-fitting>
<DIV class=mc>
<DIV class=control id=fitting-left></DIV>
<DIV class=control id=fitting-right></DIV>
<DIV id=fitting-list>
<UL class=list-h>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG src="360buy/7802c05a-2f49-4675-89af-65428d908fda.jpg"></A></DIV>

</LI>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG alt=光学鼠标
src="360buy/9f962666-5af5-43e7-98c6-fec1f372f050.jpg"></A></DIV>

<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG
src="360buy/32e62337-190c-421e-a574-8dcfc2e5671e.jpg"></A></DIV>
<DIV class=p-name><A title=笔记本散热垫 onClick="setWebBILinkCount('pshow_tuijian')"
href="http://www.360buy.com/product/196894.html"
target=_blank>笔记本散热垫</A></DIV>

</LI>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG alt=万能移动电源
src="360buy/9e6f23f7-38ca-49dc-b6d7-d75eae8441e0.jpg"></A></DIV>
<DIV class=p-name><A title=万能移动电源 onClick="setWebBILinkCount('pshow_tuijian')"
href=""
target=_blank>万能移动电源</A></DIV>

</LI>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG alt=无线路由器
src="360buy/57777d9b-678d-4ef9-943a-6ddd5fb0121b.jpg"></A></DIV>
<DIV class=p-name><A title=无线路由器 onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank>无线路由器</A></DIV>

</LI>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG alt=键盘保护膜
src="360buy/29af0295-9ab4-4eea-80f0-12bfce5eaee4.jpg"></A></DIV>
<DIV class=p-name><A title=键盘保护膜 onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank>键盘保护膜</A></DIV>

</LI>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG
alt=铼德25P刻录盘
src="360buy/7b084bc7-aaae-4f5b-aca2-d13104526e18.jpg"></A></DIV>
<DIV class=p-name><A title=铼德25P刻录盘
onclick="setWebBILinkCount('pshow_tuijian')"
href=""
target=_blank>铼德25P刻录盘</A></DIV>

</LI>
<LI>
<DIV class=p-img><A onClick="setWebBILinkCount('pshow_tuijian')"
href="" target=_blank><IMG
alt=雅碟136片光盘包
src="360buy/4e151d6b-57fc-4238-afda-04e9d24ba499.jpg"></A></DIV>
<DIV class=p-name><A title=雅碟136片光盘包
onclick="setWebBILinkCount('pshow_tuijian')"
href=""
target=_blank>雅碟136片光盘包</A></DIV>

</LI></UL></DIV></DIV></DIV>
<SCRIPT type=text/javascript>
$(function(){
$("#fitting-list").jdMarquee({
deriction:"left",
width:(screen.width>=1280)?930:710,
height:154,
step:2,
speed:4,
delay:10,
control:true,
_front:"#fitting-right",
_back:"#fitting-left"
});
})
</SCRIPT>

<SCRIPT
src="360buy/jd.lib.js"
type=text/javascript></SCRIPT>

</HTML>
js和图片，css文件
http://www.corange.cn//uploadfiles/360buy_59974.rar