当前位置: 代码迷 >> Web前端 >> 可以上下滚动的一行内容,必须手动点击后左右滚动,可以一直循环滚动,没有终点[带演示]
  详细解决方案

可以上下滚动的一行内容,必须手动点击后左右滚动,可以一直循环滚动,没有终点[带演示]

热度:516   发布时间:2013-11-09 17:06:41.0
可以左右滚动的一行内容,必须手动点击后左右滚动,可以一直循环滚动,没有终点[带演示]

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

/img/2013/11/09/09534182.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><!--co-fitting end-->
<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><!--detail end-->




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


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

原文地址:http://www.corange.cn/archives/2010/06/3649.html
  相关解决方案