標籤：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":150043 });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的新聞逐條滾動外掛程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
