HTML+JS製作無限滾動廣告程式碼
阿新 • • 發佈：2019-01-23
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滾動廣告</title> <script src="jquery.js"></script> <style> *{ margin: 0; padding: 0; } ui,li { list-style: none; } #news{ height: 24px; overflow: hidden; width: 300px; border: solid 1px; text-align: center; } </style> </head> <body> <div id="news"> <ul> <li>恭喜覃**獲得法拉利一輛</li> <li>恭喜黃**獲得戒指一枚</li> <li>恭喜董**獲得創口貼一箱</li> <li>恭喜樑**獲得哇哈哈一輛</li> <li>恭喜藍**獲得感冒藥一輛</li> </ul> </div> <script> $(function() { var $this = $("#news"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 2000); }).trigger("mouseleave"); function scrollNews(obj) { var $self = obj.find("ul"); var lineHeight = $self.find("li:first").height(); $self.animate({ "marginTop": -lineHeight + "px" }, 500, function() { $self.css({ marginTop: 0 }).find("li:first").appendTo($self); }) } }) </script> </body> </html>