16jquery学习笔记-------动画----新闻面板案例 

 




 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title></title>
 5     <style>
 6         #u1 {
 7             list-style-type: none;
 8             margin: 0;
 9             padding: 0;
10         }
11 
12             #u1 li {
13                 float: left;
14                 height: 20px;
15                 width: 120px;
16                 background-color: yellow;
17                 /*border:1px solid red;*/
18                 text-align: center;
19                 margin: 0;
20                 cursor: pointer;
21             }
22     </style>
23     <script src="jquery-1.8.3.js"></script>
24     <script type="text/javascript">
25         $(function () {
26             //$('#dvWar,#dvFarming,#dvLetter').hide();
27             //$('#dvNew').show();
28             $('#dvView div:gt(0)').fadeOut();
29 
30 
31             $('#u1 li').mouseover(function () {
32                 //alert($(this).text());
33                 switch ($(this).text()) {
34                     //case '新闻': $('#dvWar,#dvFarming,#dvLetter').hide();
35                     //    $('#dvNew').show(); break;
36                     //case '军事': $('#dvNew,#dvFarming,#dvLetter').hide();
37                     //    $('#dvWar').show(); break;
38                     //case '农业': $('#dvWar,#dvNew,#dvLetter').hide();
39                     //    $('#c').show(); break;
40                     //case '文学': $('#dvWar,#dvFarming,#dvNew').hide();
41                     //    $('#dvLetter').show(); break;
42                    
43                     case '新闻': $('#dvNew').fadeIn(1000).siblings('div').fadeOut(1000);
44                         break;
45                     case '军事': $('#dvWar').fadeIn(1000).siblings('div').fadeOut(1000);
46                         break;
47                     case '农业': $('#dvFarming').fadeIn(1000).siblings('div').fadeOut(1000);
48                         break;
49                     case '文学': $('#dvLetter').fadeIn(1000).siblings('div').fadeOut(1000);
50                         break;
51                 }
52             });
53         });
54 
55     </script>
56 
57 </head>
58 <body>
59     <div id="dvView">
60         <ul id="u1">
61             <li>新闻</li>
62             <li>军事</li>
63             <li>农业</li>
64             <li>文学</li>
65         </ul>
66         <div id="dvNew" style="height:300px;width:480px;background-color:green;">
67 
68         </div>
69         <div id="dvWar" style="height:300px;width:480px;background-color:pink;">
70 
71         </div>
72         <div id="dvFarming" style="height:300px;width:480px;background-color:plum;">
73 
74         </div>
75         <div id="dvLetter" style="height:300px;width:480px;background-color:blue;">
76 
77         </div>
78     </div>
79 </body>
80 </html>

 

posted on 2016-01-13 22:10  努力的活着_在人间  阅读(169)  评论(0)    收藏  举报

导航