一个很不错JS公告滚动效果

admin

其中里面的"fa fa-bullhorn"类用到了Font Awesome字库，如需使用需要先加载<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

1. <!doctype html>
   
2. <html>
   
3. <head>
   
4. <meta charset="utf-8"/>
   
5. 
   
6. <style>
   
7. /* top */
   
8. .top{width:100%;height:40px;margin-top:20px;border-top:1px dashed #f0f0f0;border-bottom:1px dashed #f0f0f0;font:16px/40px arial,'microsoft yahei'}
   
9. .top a{color:#333}
   
10. .top>.top-bullhorn{width:50px;height:40px;float:left;font-size:20px;line-height:40px;text-align:center;color:#f86442}
    
11. .top-box{width:calc(100% - 100px);height:40px;float:left;overflow:hidden}
    
12. .top-box>ul{width:100%;height:40px}
    
13. .top-box>ul>li{width:100%;height:40px;overflow:hidden}
    
14. .top-more{width:50px;height:40px;float:left;text-align:right}
    
15. </style>
    
16. </head>
    
17. <body>
    
18. <!-- top -->
    
19. <div class="top">
    
20.         <div class="top-bullhorn fa fa-bullhorn"></div>
    
21.         <div class="top-box">
    
22.                 <ul>
    
23.                         <li><a href="">2019哈尔滨年货博览会，诚招展会合作！</a></li>
    
24.                         <li><a href="">2019杭州年货博览会火爆招商中！</a></li>
    
25.                 </ul>
    
26.         </div>
    
27.         <a class="top-more" href="">更多</a>
    
28. </div>
    
29. <!-- top -->
    
30. 
    
31. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    
32. <script>
    
33. /**
    
34. * 头条
    
35. */
    
36. function autoScroll(obj){
    
37.         $(obj).find("ul").animate({
    
38.                 marginTop : "-40px"
    
39.                 },500,function(){
    
40.                 $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
    
41.                 })
    
42.         }
    
43. $(function(){
    
44.         setInterval('autoScroll(".top-box")',3000);
    
45.         })
    
46. </script>
    
47. </body>
    
48. </html>

复制代码

https://blog.csdn.net/kou13043022076/article/details/80865686