jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果


Posted in Javascript onFebruary 15, 2017

本文实例为大家分享了jquery.kxbdmarquee.js无缝滚动的具体代码,供大家参考,具体内容如下

strep1.页面引入相关文件

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

<script src="lib/jquery/jquery.js"></script>
<script src="lib/jquery/jquery.kxbdmarquee.js"></script>

step2.写html结构、css样式、js

css样式:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果 

html结构:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果 

js效果:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

<head>
 <meta charset="UTF-8">
 <title>滚动轮播</title>
 <style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
a{color:#333;}
ul{list-style:none;}
#demo1{position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333;}
#demo1 ul li{float:left; padding:0 1px;}
#demo1 ul li img{display:block;}

#demo2{position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#ff6633;}
#demo2 ul li{float:left; padding:0 10px; line-height:25px;}

#demo3{position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333;}
#demo3 ul li{float:left; padding:1px 0;}
#demo3 ul li img{display:block;}

#demo4{position:absolute;top:150px;left:400px;width:200px;height:200px; overflow:hidden;background:#EFEFEF;}
#demo4 ul li{float:left; width:180px; padding:10px; line-height:20px;}
</style>
</head>

<body>
 <div id="demo1">
 <ul>
  <li><img src="img/01s.jpg" width="60" height="45"></li>
  <li><img src="img/02s.jpg" width="60" height="45"></li>
  <li><img src="img/03s.jpg" width="60" height="45"></li>
  <li><img src="img/04s.jpg" width="60" height="45"></li>
  <li><img src="img/05s.jpg" width="60" height="45"></li>
  <li><img src="img/06s.jpg" width="60" height="45"></li>
  <li><img src="img/07s.jpg" width="60" height="45"></li>
  <li><img src="img/08s.jpg" width="60" height="45"></li>
 </ul>
 </div>
 <div id="demo2">
 <ul>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告一</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告三新闻公告三</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告四新闻公告四新闻公告四</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告六新闻公告六新闻公告六</a></li>
 </ul>
 </div>
 <div id="demo3">
 <ul>
  <li><img src="img/01s.jpg" width="60" height="45"></li>
  <li><img src="img/02s.jpg" width="60" height="45"></li>
  <li><img src="img/03s.jpg" width="60" height="45"></li>
  <li><img src="img/04s.jpg" width="60" height="45"></li>
  <li><img src="img/05s.jpg" width="60" height="45"></li>
  <li><img src="img/06s.jpg" width="60" height="45"></li>
  <li><img src="img/07s.jpg" width="60" height="45"></li>
  <li><img src="img/08s.jpg" width="60" height="45"></li>
 </ul>
 </div>
 <div id="demo4">
 <ul>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告一新闻公告一</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
 </ul>
 </div>
 <script src="lib/jquery/jquery.js"></script>
 <script src="lib/jquery/jquery.kxbdmarquee.js"></script>
 <script>
 (function(){
  $("#demo1").kxbdMarquee({direction:"right"});
  $("#demo2").kxbdMarquee({isEqual:false});
  $("#demo3").kxbdMarquee({direction:"down"});
  $("#demo4").kxbdMarquee({direction:"up",isEqual:false});
 })();
 </script>
</body>

效果图:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

注意:

CSS 样式

/**
 * 父容器需要设置溢出隐藏
 * 如果是水平滚动,项目需要设置浮动
 */
#demo {overflow:hidden;}
#demo ul li {float:left;}

参数说明

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

代码:https://github.com/erdouzhang/jquery.kxbdmarquee.js
在线演示:https://erdouzhang.github.io/jquery.kxbdmarquee.js/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 #Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 #Javascript
图文详解Javascript中的上下文和作用域
Feb 15 #Javascript
js实现省份下拉菜单效果
Feb 15 #Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 #Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 #Javascript
基于canvas的二维码邀请函生成插件
Feb 14 #Javascript
You might like
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python实现两张图片的像素融合
2019/02/23 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
大学生村官演讲稿
2014/04/25 职场文书
绿色环保口号
2014/06/12 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2014年财政所工作总结
2014/11/22 职场文书
聘任书范文大全
2015/09/21 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android