JQuery实现新闻阅读器

最新推荐文章于 2021-09-08 20:29:40 发布

weixin_30823833

最新推荐文章于 2021-09-08 20:29:40 发布

阅读量127

点赞数

文章标签： javascript 网络数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/srxhmxx/p/4554944.html

版权

（该新闻阅读器使用了淡入和滑动特效）顶部不断有新元素淡入，同时底部元素不断被删除

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>新闻阅读器</title>
 6 </head>
 7 <body>
 8 <h1 class="news">新闻阅读器</h1>
 9 
10 <script src="../Public/assets/plugins/jquery/jquery-1.11.2.js" type="text/javascript"></script>
11 <script src="../Public/assets/plugins/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
12 <script src="../Public/assets/global/js/NewsReader.js" type="text/javascript"></script>
13 <script type="text/javascript">
14 $(document).ready(function(){
15     NewsReader.init();
16 });
17 </script>
18 </body>
19 </html>

 1 var NewsReader = function(){
 2     var initData = function(){
 3         var newsArray = [
 4                  "1.计算机导论",
 5                  "2.C语言程序设计",
 6                  "3.软件设计师教程",
 7                  "4.数据结构",
 8                  "5.计算机网络",
 9                  "6.精彩绝伦的JQuery",
10                  "7.微信公众平台开发实战",
11                  "8.编译原理",
12                  "9.计算机原理",
13                  "10.深入html5应用开发",
14                  "11.PHP应用开发",
15                  "12.java程序设计"];
16         var newsLength = newsArray.length;
17         var newsInterval = 2000;
18         $(".news").after("<ul id='news-feed'></ul>");
19         for(var i=0;i<newsLength;i++){
20             $("#news-feed").append('<li>'+newsArray[i]+'</li>');
21         }
22         function slideHeadLine(){
23             $("#news-feed li:last").clone().prependTo("#news-feed").css("display","none");
24             $("#news-feed li:first").fadeIn(1000).slideDown(500);
25             $("#news-feed li:last").remove();
26         }
27         setInterval(slideHeadLine,newsInterval);
28     }
29     return{
30         init:function(){
31             initData();
32         }
33     }
34 }();

顶部不断有新元素淡入，同时底部元素不断被删除的效果图

转载于:https://www.cnblogs.com/srxhmxx/p/4554944.html

weixin_30823833

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现新闻阅读器

（该新闻阅读器使用了淡入和滑动特效）顶部不断有新元素淡入，同时底部元素不断被删除 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>新闻阅读器</title> 6 </head> 7 <b...
复制链接

扫一扫