<!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>
HTML+JS制作无限滚动广告代码
最新推荐文章于 2024-07-16 17:26:59 发布