基于jQuery的新闻逐条滚动插件

最新推荐文章于 2024-05-31 09:50:22 发布

weixin_30764137

最新推荐文章于 2024-05-31 09:50:22 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huli0828/p/7279090.html

版权

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

转载于:https://www.cnblogs.com/huli0828/p/7279090.html

weixin_30764137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery的新闻逐条滚动插件

演示页面HTML代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 ...
复制链接

扫一扫