Jquery无缝滚动

Posted 2020-10-13 zcy1995

<!--Style样式-->

<style>
*{margin:0;padding:0;}
body{font-size:12px; font-family:"微软雅黑"}
a{color:#333; text-decoration:none;}
ul{list-style:none;}
#marquee2{width:300px;height:25px;overflow:hidden; background:#EFEFEF; margin:20px auto 0;}
#marquee2 ul li{float:left; padding:0 10px; line-height:25px;}
</style>

<!--body部分-->

<div id="marquee2">
<ul>
<li><a href="#">新闻公告一</a><>
<li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a><>
<li><a href="#">新闻公告三新闻公告三</a><>
<li><a href="#">新闻公告四新闻公告四新闻公告四</a><>
<li><a href="#">新闻公告五新闻公告五新闻公告五</a><>
<li><a href="#">新闻公告六新闻公告六新闻公告六</a><>
</ul>
</div>

<!--两个js文件-->

<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.kxbdMarquee.js"></script>

<!--Jquery部分向左滚动-->
<script>
(function(){
$("#marquee2").kxbdMarquee({isEqual:false});
})();
</script>

<!--Jquery部分向右滚动-->
<script>
(function(){
$("#marquee2").kxbdMarquee({isEqual:false，direction: "right"});
})();
</script>

<!--Jquery部分向上滚动，向上滚动需要在style里取消浮动-->
<script>
(function(){
$("#marquee2").kxbdMarquee({isEqual:false，direction: "up"});
})();
</script>

<!--Jquery部分向上滚动，向下滚动需要在style里取消浮动-->
<script>
(function(){
$("#marquee2").kxbdMarquee({isEqual:false，direction: "down"});
})();
</script>