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

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

strep1.页面引入相关文件

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

css样式：

 

html结构：

 

js效果：

 
 
 



 

 

  

  

  

  

  

  

  

  

 
 
 

 

  
新闻公告一
  
新闻公告二新闻公告二新闻公告二新闻公告二
  
新闻公告三新闻公告三
  
新闻公告四新闻公告四新闻公告四
  
新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五
  
新闻公告六新闻公告六新闻公告六
 
 
 

 

  

  

  

  

  

  

  

  

 
 
 

 

  
新闻公告一新闻公告一
  
新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二
  
新闻公告三新闻公告三新闻公告三新闻公告三
  
新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四
  
新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五
  
新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六
 
 
 
 
 

效果图：

注意：

CSS 样式

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

参数说明

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

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