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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 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
php简单提示框alert封装函数
2010/08/08 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
最短的IE判断代码
2011/03/13 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JS判断数组那点事
2017/10/10 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python多线程原理与用法详解
2018/08/20 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
2015年林业工作总结
2015/05/14 职场文书
调研报告的主要写法
2019/04/18 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Python实战之OpenCV实现猫脸检测
2021/06/26 Python