演示页面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