jQuery模拟Marquee实现无缝滚动效果完整实例
本文实例讲述了jQuery模拟Marquee实现无缝滚动效果。分享给大家供大家参考，具体如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>模拟Marquee无缝滚动</title>
<styletype="text/css">
/*CSSDocumentreset*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}
:focus{/*remembertodefinefocusstyles!*/
outline:0;
}
body{
font-family:Arial,Helvetica,sans-serif;
padding:0;
font-size:12px;
margin:0pxautoautoauto;
color:black;
cursor:default;
}
ol,ul{
list-style:none;
}
table{/*tablesstillneed'cellspacing="0"'inthemarkup*/
border-collapse:collapse;
border-spacing:0;
}
caption,th,td{
font-weight:normal;
text-align:left;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:"";
}
blockquote,q{
quotes:"""";
}
aimg{
border:0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
ul,li,ol{list-style:none;}
/*水平滚动*/
.marquee_horizontal{overflow:hidden;width:360px;height:45px;}
.marquee_horizontalulli{float:left;padding:0px;line-height:24px;}
.marquee_horizontalulliimg{display:block;}
/*垂直滚动*/
.marquee_vertical{overflow:hidden;width:60px;height:225px;}
.marquee_verticalulli{float:left;padding:0px;}
.marquee_verticalulliimg{display:block;}
.marquee_c{overflow:hidden;width:360px;height:25px;}
.marquee_culli{float:left;padding:0px;line-height:24px;}
.marquee_d{overflow:hidden;width:180px;height:200px;}
.marquee_dulli{float:left;width:180px;padding:0px;line-height:20px;}
</style>
</head>
<body>
<divid="marquee_a"class="marquee_horizontal">
<ul>
<li><ahref="#"><imgsrc="img/a1.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a2.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a3.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a4.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a5.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a6.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a7.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a8.jpg"></a></li>
</ul>
</div>
<divid="marquee_b"class="marquee_vertical">
<ul>
<li><ahref="#"><imgsrc="img/a1.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a2.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a3.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a4.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a5.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a6.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a7.jpg"></a></li>
<li><ahref="#"><imgsrc="img/a8.jpg"></a></li>
</ul>
</div>
<divid="marquee_c"class="marquee_c">
<ul>
<li><ahref="#">星期一要长</a></li>
<li><ahref="#">星期二特别长一点</a></li>
<li><ahref="#">星期三</a></li>
<li><ahref="#">星期四长度不等</a></li>
<li><ahref="#">星期五</a></li>
<li><ahref="#">星期六长短</a></li>
<li><ahref="#">星期日</a></li>
</ul>
</div>
<divid="marquee_d"class="marquee_d">
<ul>
<li><ahref="#">星期一星期一星期一星期一星期一星期一星期一星期一星期一</a></li>
<li><ahref="#">星期二</a></li>
<li><ahref="#">星期三星期三星期三星期三星期三星期三</a></li>
<li><ahref="#">星期四</a></li>
<li><ahref="#">星期五</a></li>
<li><ahref="#">星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六</a></li>
<li><ahref="#">星期日</a></li>
</ul>
</div>
<scriptsrc="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"type="text/javascript"></script>
<scriptsrc="http://ah.sina.com.cn/iframe/101/2014/1117/130.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$("#marquee_a").kxbdMarquee();
$("#marquee_b").kxbdMarquee({direction:"down"});
$("#marquee_c").kxbdMarquee({direction:"left",isEqual:false});
$("#marquee_d").kxbdMarquee({direction:"up",isEqual:false});
});
</script>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。