基于jQuery的新闻逐条滚动插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于jQuery的新闻逐条滚动插件相关的知识，希望对你有一定的参考价值。
演示页面HTML代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 .tui_news_lists{ 9 width: 400px; 10 height: 30px; 11 line-height: 30px; 12 overflow: hidden; 13 border: 1px solid #dcdcdc; 14 } 15 .tui_news_lists ul{ 16 padding-left: 10px; 17 margin-top: 0; 18 } 19 .tui_news_lists li{ 20 height: 30px; 21 line-height: 30px; 22 width: 100%; 23 overflow: hidden; 24 text-overflow: ellipsis; 25 white-space: nowrap; 26 list-style: none; 27 } 28 .tui_news_lists li a{ 29 text-decoration: none; 30 font-size: 14px; 31 color: #333; 32 } 33 </style> 34 35 <script src="js/jquery-1.11.1.min.js"></script> 36 <script src="js/newsScroll.js"></script> 37 38 <script> 39 $(function(){ 40 $(".tui_news_lists").newsScroll({ 41 "hoverstop":true, 42 "spacetime":1500 43 }); 44 }) 45 </script> 46 </head> 47 <body> 48 <div class="tui_news_lists"> 49 <ul> 50 <li><a href="###">共享单车新规发布:禁止向未满12岁儿童提供服务</a></li> 51 <li><a href="###">人民日报刊文谈反转新闻：不少大V频频被打脸</a></li> 52 <li><a href="###">专家详解北京为何雨量分布不均 今起闷热回归</a></li> 53 <li><a href="###">美士兵失踪案搅局南海 在这一海域连连“丢人”</a></li> 54 <li><a href="###">从魏则西到李文星 互联网企业不负责坑害多少人</a></li> 55 <li><a href="###">建军大业里的这些人历史书没写 但同样举足轻重</a></li> 56 </ul> 57 </div> 58 59 </body> 60 </html>
演示效果
插件下载
GitHub下载地址：https://github.com/hulihuli/newsScroll/blob/master/newsScroll/js/newsScroll.js
以上是关于基于jQuery的新闻逐条滚动插件的主要内容，如果未能解决你的问题，请参考以下文章
基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js