基於jQuery的公告無限迴圈滾動實現程式碼
阿新 • • 發佈：2018-12-10
基於jQuery的公告無限迴圈滾動實現程式碼，效果如下，多用於pc端電商網站之中不斷的迴圈更新的公告訊息。
寫一個簡單的小demo：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>基於jQuery的公告無限迴圈滾動實現程式碼</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } body { line-height: 1.5; font-size: 14px; } .scroll { display: inline-block; overflow: hidden; position: relative; height: 50px; } .scroll ul { transform: translateY(0); } .animate { -webkit-transition: all .3s ease-out; } .scroll li { overflow: hidden; display: -webkit-box; margin-left: 10px; width: 90%; height: 50px; line-height: 30px; color: #333; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; } .scroll li img{ margin-top: 20px; margin-right: 12px; width: 12px; height: 12px; } </style> </head> <body> <div class="scroll"> <ul> <li><img src="message.png" /><span>前端妹子是我嗎</span></li> <li><img src="message.png" />對呀，我就是前端妹子啊</li> <li><img src="message.png" />哈哈哈你是誰呀</li> <li><img src="message.png" />你猜猜我是哪個</li> </ul> </div> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script> $(function() { var scrollDiv = $(".scroll"), $ul = scrollDiv.find("ul"), $li = scrollDiv.find("li"), $length = $li.length, $liHeight = $li.height(), num = 0; if(scrollDiv.length == 0) { return; } if($length > 1) { $ul.append($li.eq(0).clone()); setInterval( function() { num++; $ul.addClass("animate").css("-webkit-transform", "translateY(-" + $liHeight * (num) + "px)"); setTimeout( function() { if(num == $length) { $ul.removeClass("animate").css("-webkit-transform", "translateY(0)"); num = 0; } }, 300); }, 3000); } }); </script> </html>
熱門推薦：前端，Java，產品經理，微信小程式，Python等資源合集大放送
原文作者：祈澈姑娘；技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。