码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-03 13:48:05      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:head   ips   ima   新闻   hover   hub   set   padding   image   

 演示页面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的新闻逐条滚动插件

标签:head   ips   ima   新闻   hover   hub   set   padding   image   

原文地址:http://www.cnblogs.com/huli0828/p/7279090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!