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 指导方针
Apr 05 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
JS正则表达式验证中文字符
May 08 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
浅析is_writable的php实现
2013/06/18 PHP
php中define用法实例
2015/07/30 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python解析含有重复key的json方法
2019/01/22 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
小学优秀学生评语
2014/12/29 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript