（该新闻阅读器使用了淡入和滑动特效）顶部不断有新元素淡入，同时底部元素不断被删除
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 }();
顶部不断有新元素淡入，同时底部元素不断被删除的效果图
时间： 2024-08-27 22:03:39