标签：
（该新闻阅读器使用了淡入和滑动特效）顶部不断有新元素淡入，同时底部元素不断被删除
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 }();
顶部不断有新元素淡入，同时底部元素不断被删除的效果图
标签：
原文地址：http://www.cnblogs.com/srxhmxx/p/4554944.html
