编程 Javascript

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

Posted in Javascript onFebruary 15, 2017

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

strep1.页面引入相关文件

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

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

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

- Author -

erdouzhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery实现仿新浪微博获取文本框能输入的字数代码

Feb 22 Javascript

js 获取radio按钮值的实例

Aug 17 Javascript

JavaScript字符串对象toLowerCase方法入门实例（用于把字母转换为小写）

Oct 17 Javascript

Clipboard.js 无需Flash的JavaScript复制粘贴库

Oct 02 Javascript

JavaScript 不支持 indexof 该如何解决

Mar 30 Javascript

Javascript typeof与instanceof的区别

Oct 18 Javascript

JavaScript定时器制作弹窗小广告

Feb 05 Javascript

node.js学习之事件模块Events的使用示例

Sep 28 Javascript

微信小程序tabBar模板用法实例分析【附demo源码下载】

Nov 28 Javascript

layui radio性别单选框赋值方法

Aug 15 Javascript

微信小程序之数据绑定原理解析

Aug 14 Javascript

WebPack工具运行原理及入门教程

Dec 02 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