图片无间隙滚动
+展开
-HTML
<!!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>编程设计网--图片无间隙滚动</title>
<meta name="Keywords" content="图片无间隙滚动"/>
<meta name="Description" content="图片无间隙滚动"/>
<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;}
</style>
</head>
<body>
<div id="wapper">
<div class="design" id="dvMarquee" onmouseover="mStop()" onmouseout="mStart(event)">
<ul id="ulDemo">
<li><a style="background-image:url(//imgdesign/2009625160410102_s.jpg);" class="word" href="//designdetail55.html"/><a href="//designdetail55.html">的士车车身系列</a></li>
<li><a style="background-image:url(//imgdesign/2009625160326297_s.jpg);" class="word" href="//designdetail54.html"/><a href="//designdetail54.html">的士车车身系列</a></li>
<li><a style="background-image:url(//imgdesign/2009625160222613_s.jpg);" class="word" href="//designdetail53.html"/><a href="//designdetail53.html">的士车车身系列</a></li>
<li><a style="background-image:url(//imgdesign/2009625153717892_s.jpg);" class="word" href="//designdetail52.html"/><a href="//designdetail52.html">全友家私</a></li>
<li><a style="background-image:url(//imgdesign/2009625152659533_s.jpg);" class="word" href="//designdetail51.html"/><a href="//designdetail51.html">中国移动通信集团</a></li>
<li><a style="background-image:url(//imgdesign/2009625152609840_s.jpg);" class="word" href="//designdetail50.html"/><a href="//designdetail50.html">鸿矛药酒</a></li>
</ul>
</div></div>
<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);
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>编程设计网--图片无间隙滚动</title>
<meta name="Keywords" content="图片无间隙滚动"/>
<meta name="Description" content="图片无间隙滚动"/>
<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;}
</style>
</head>
<body>
<div id="wapper">
<div class="design" id="dvMarquee" onmouseover="mStop()" onmouseout="mStart(event)">
<ul id="ulDemo">
<li><a style="background-image:url(//imgdesign/2009625160410102_s.jpg);" class="word" href="//designdetail55.html"/><a href="//designdetail55.html">的士车车身系列</a></li>
<li><a style="background-image:url(//imgdesign/2009625160326297_s.jpg);" class="word" href="//designdetail54.html"/><a href="//designdetail54.html">的士车车身系列</a></li>
<li><a style="background-image:url(//imgdesign/2009625160222613_s.jpg);" class="word" href="//designdetail53.html"/><a href="//designdetail53.html">的士车车身系列</a></li>
<li><a style="background-image:url(//imgdesign/2009625153717892_s.jpg);" class="word" href="//designdetail52.html"/><a href="//designdetail52.html">全友家私</a></li>
<li><a style="background-image:url(//imgdesign/2009625152659533_s.jpg);" class="word" href="//designdetail51.html"/><a href="//designdetail51.html">中国移动通信集团</a></li>
<li><a style="background-image:url(//imgdesign/2009625152609840_s.jpg);" class="word" href="//designdetail50.html"/><a href="//designdetail50.html">鸿矛药酒</a></li>
</ul>
</div></div>
<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);
}
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：图片无间隙滚动