分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

Jquery无缝滚动

发布时间:2023-09-06 01:22责任编辑:熊小新关键词:暂无标签

<!--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>

Jquery无缝滚动

原文地址:http://www.cnblogs.com/zcy1995/p/7773658.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved