图片无间隙滚动

示例代码下载

<!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"></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" onmouseover="mStop()" onmouseout="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"></mce:script> </body></html>

本文来自http://www.w3dev.cn/article/20130101/294.aspx

秒客网

图片无间隙滚动

相关文章