演示页面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
时间： 2024-10-10 14:26:45