图片无间隙滚动

示例代码下载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Web开发网--图片无间隙滚动</title> <meta name="Keywords" content="图片无间隙滚动"/> <meta name="Description" content="图片无间隙滚动"/> <mce:style type="text/css"><!-- body{font-size:12px;} #wapper{margin:100px auto;width:600px;border:solid 1px black;padding:20px;} .design{width:100%;padding:5px 0px 5px 0px;overflow:hidden;} .design a{color:#97450f;display:block;margin-top:5px;} .design li{width:245px;border:solid 1px #949494;height:125px;float:left;text-align:center;margin-left:5px !important;margin-right:5px !important;margin-left:4px;margin-right:4px;} .design li a.word{margin-top:0px;background:none no-repeat center center;width:100%;border-bottom:solid 1px #949494;height:100px;} --></mce:style><style type="text/css" mce_bogus="1"> body{font-size:12px;} #wapper{margin:100px auto;width:600px;border:solid 1px black;padding:20px;} .design{width:100%;padding:5px 0px 5px 0px;overflow:hidden;} .design a{color:#97450f;display:block;margin-top:5px;} .design li{width:245px;border:solid 1px #949494;height:125px;float:left;text-align:center;margin-left:5px !important;margin-right:5px !important;margin-left:4px;margin-right:4px;} .design li a.word{margin-top:0px;background:none no-repeat center center;width:100%;border-bottom:solid 1px #949494;height:100px;} </style> </head> <body> <div id="wapper"> <div class="design" id="dvMarquee" οnmοuseοver="mStop()" οnmοuseοut="mStart(event)"> <ul id="ulDemo"> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160410102_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160410102_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail55.html" mce_href="http://www.w3dev.cn/designdetail55.html"></a><a href="http://www.w3dev.cn/designdetail55.html" mce_href="http://www.w3dev.cn/designdetail55.html">的士车车身系列</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160326297_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160326297_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail54.html" mce_href="http://www.w3dev.cn/designdetail54.html"></a><a href="http://www.w3dev.cn/designdetail54.html" mce_href="http://www.w3dev.cn/designdetail54.html">的士车车身系列</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160222613_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160222613_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail53.html" mce_href="http://www.w3dev.cn/designdetail53.html"></a><a href="http://www.w3dev.cn/designdetail53.html" mce_href="http://www.w3dev.cn/designdetail53.html">的士车车身系列</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625153717892_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625153717892_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail52.html" mce_href="http://www.w3dev.cn/designdetail52.html"></a><a href="http://www.w3dev.cn/designdetail52.html" mce_href="http://www.w3dev.cn/designdetail52.html">全友家私</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152659533_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152659533_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail51.html" mce_href="http://www.w3dev.cn/designdetail51.html"></a><a href="http://www.w3dev.cn/designdetail51.html" mce_href="http://www.w3dev.cn/designdetail51.html">中国移动通信集团</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152609840_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152609840_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail50.html" mce_href="http://www.w3dev.cn/designdetail50.html"></a><a href="http://www.w3dev.cn/designdetail50.html" mce_href="http://www.w3dev.cn/designdetail50.html">鸿矛药酒</a></li> </ul> </div></div> <mce:script type="text/javascript"><!-- var Showbo={author:'Showbo'}; //是否为ie浏览器 Showbo.IsIE=!!document.all; //ie浏览器版本 Showbo.IEVersion=(function(){ if(!Showbo.IsIE)return -1; try{ return parseFloat(/msie ([/d/.]+)/i.exec(navigator.userAgent)[1]); }catch(e){return -1;}})(); //按id获取对象 Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;} //按标签名称获取对象 Showbo.$s=function(){var o,tag;if(arguments.length==1){o=document;tag=arguments[0];}else{o=arguments[0];tag=arguments[1];}return o.getElementsByTagName(tag);} var dvMarquee=Showbo.$('dvMarquee'),ulDemo=Showbo.$('ulDemo'),lis=Showbo.$s(ulDemo,'li'),demoWidth=0,mTimer=null,mDelay=50,mScrollLeft=0; function mScroll(){ mScrollLeft++; dvMarquee.scrollLeft=mScrollLeft; if(mScrollLeft==demoWidth)mScrollLeft=Showbo.IsIE&&Showbo.IEVersion<7?3:2;//这里也要修改ie6的问题,设置为3/2比较流畅,如果设置为0会顿一下 } function mStop(){if(mTimer){clearInterval(mTimer);marqueeTimer=null;}} function mStart(e){ if("object"==typeof(e)){ var refO=e.toElement||e.relatedTarget; if(refO&&!dvMarquee.contains(refO))mTimer=setInterval('mScroll()',mDelay); } else mTimer=setInterval('mScroll()',mDelay); } if(lis.length>=3){//大于2张图片时执行滚动 demoWidth=(Showbo.IsIE&&Showbo.IEVersion<7?256:257)*lis.length;//注意ie6和ie7+及firefox的框架模型不一致,这里要修正大小 ulDemo.style.width=demoWidth*2+'px'; ulDemo.innerHTML+=ulDemo.innerHTML; mStart(true); } // --></mce:script> </body> </html>

本文来自https://wwwdev.cn/article/20130101/294.aspx

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

斯洛文尼亚旅游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值