JQuery实现新闻阅读器

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

 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 }();

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

posted @ 2015-06-05 16:24  北斗星空的笨小孩  阅读(639)  评论(0)  编辑  收藏  举报