思洋互动网站建设学前班

核心脚本 script.js
广州网站建设,网站建设,广州网页设计,广州网站设计

1. View Code   
2.  
3. $(document).ready(function(){  
4.     var num = numberOfScreens;  
5.  
6.     for(var i=1;i<=num;i++){  
7.         $('#name'+i).html(blockName[i]);  
8.     }  
9.       
10.     if(hoverEffect){  
11.         for(i=1;i<=num;i++){  
12.             $('<style>#wrapper'+i+' div.site:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>').appendTo('head');  
13.         };  
14.     };  
15.       
16.     if(searchEngine=='google'){  
17.         search='http://www.google.com/search';  
18.     }  
19.     else if(searchEngine=='bing'){  
20.         search='http://www.bing.com/search';  
21.     }  
22.     else if(searchEngine=='yahoo'){  
23.         search='http://search.yahoo.com/bin/search';  
24.     }  
25.     else{  
26.         search='http://www.google.com/search';  
27.         searchEngine='google';  
28.     };  
29.  
30.     $('form').attr('action',search);  
31.     $('#search-engine').css('background','#fff url(img/'+searchEngine+'.png) center center no-repeat');  
32.       
33.     var windowWidth = $(window).width();  
34.     var windowHeight = $(window).height();  
35.     var left1 = Math.floor((windowWidth - 960)/2);  
36.     var left2 = left1 - 1040;  
37.     var left3 = left1 - 2080;  
38.     var wrapperTop = Math.floor((windowHeight - 480)/2)-60;  
39.       
40.     $('#place').css({'left':left1,'top':wrapperTop});  
41.     var wrapperPos = 1;  
42.     $('#wrapper1 input:text').focus();  
43.     var animDone = true;  
44.       
45.     function anim1to2(){  
46.         $('#wrapper1 input:text').focusout();  
47.         animDone = false;  
48.         $('#place').animate({  
49.             left: left2,  
50.         },1000,'circEaseOut',function() {  
51.             $('#wrapper2 input:text').focus();  
52.             animDone = true;  
53.             wrapperPos = 2;  
54.         });  
55.         $('#button1to2').hide();              
56.         $('#button2to1').show();  
57.         if(num>2){  
58.             $('#button2to3').show();  
59.             $('#button3to2').hide();  
60.         };  
61.     };  
62.       
63.     function anim2to1(){  
64.         $('#wrapper2 input:text').focusout();  
65.         animDone = false;  
66.         $('#place').animate({  
67.             left: left1  
68.         },1000,'circEaseOut',function() {  
69.             $('#wrapper1 input:text').focus();  
70.             animDone = true;  
71.             wrapperPos = 1;  
72.         });  
73.         $('#button1to2').show();              
74.         $('#button2to1').hide();  
75.         if(num>2){  
76.             $('#button2to3').hide();  
77.             $('#button3to2').hide();  
78.         };          
79.     };  
80.       
81.     function anim2to3(){  
82.         $('#wrapper2 input:text').focusout();  
83.         animDone = false;  
84.         $('#place').animate({  
85.             left: left3  
86.         },1000,'circEaseOut',function() {  
87.             $('#wrapper3 input:text').focus();  
88.             animDone = true;  
89.             wrapperPos = 3;  
90.         });  
91.         $('#button1to2').hide();  
92.         $('#button3to2').show();  
93.         $('#button2to1').hide();  
94.         $('#button2to3').hide();      
95.     };  
96.       
97.     function anim3to2(){  
98.         $('#wrapper3 input:text').focusout();  
99.         animDone = false;  
100.         $('#place').animate({  
101.             left: left2  
102.         },1000,'circEaseOut',function() {  
103.             $('#wrapper2 input:text').focus();  
104.             animDone = true;  
105.             wrapperPos = 2;  
106.         });  
107.         $('#button1to2').hide();  
108.         $('#button3to2').hide();  
109.         $('#button2to1').show();  
110.         $('#button2to3').show();              
111.     };  
112.       
113.     if(num>1){  
114.         $('#button1to2').click(function(){  
115.             anim1to2();  
116.         });  
117.           
118.         $('#button2to1').click(function(){  
119.             anim2to1();  
120.         });  
121.           
122.         if(num>2){  
123.             $('#button2to3').click(function(){  
124.                 anim2to3();  
125.             });  
126.               
127.             $('#button3to2').click(function(){  
128.                 anim3to2();  
129.             });  
130.         };  
131.     };  
132.  
133.     $(document).bind('keydown',function(event){   
134.         if(event.keyCode == '39' || event.keyCode == '37'){  
135.             event.preventDefault();  
136.         }  
137.         if(event.which=='39' && animDone){  
138.               
139.             if(wrapperPos==1 && num>1){  
140.                 anim1to2();  
141.             };  
142.             if(wrapperPos==2 && num>2){  
143.                 anim2to3();  
144.             };  
145.         };  
146.         if(event.which=='37' && animDone){  
147.               
148.             if(wrapperPos==3){  
149.                 anim3to2();  
150.             };  
151.             if(wrapperPos==2){  
152.                 anim2to1();  
153.             };              
154.         };  
155.     });   
156.  
157.     $(document).mousewheel(function(event, delta) {  
158.         if (delta > 0 && animDone){  
159.             if(wrapperPos==3){  
160.                 anim3to2();  
161.             };  
162.             if(wrapperPos==2){  
163.                 anim2to1();  
164.             };  
165.         }  
166.         else if (delta < 0 && animDone){  
167.             if(wrapperPos==1 && num>1){  
168.                 anim1to2();  
169.             };  
170.             if(wrapperPos==2 && num>2){  
171.                 anim2to3();  
172.             };  
173.         };          
174.         event.preventDefault();          
175.     });  
176.  
177.     var j=0;  
178.     for (j=0; j <=(num-1); j++) {          
179.         if(bookmark[j]==null) continue;  
180.         for(i=0;i<=11;i++){              
181.             if(bookmark[j][i]==null) continue;  
182.             var title = bookmark[j][i]['title'];  
183.             var url = bookmark[j][i]['url'];  
184.             var thumb = bookmark[j][i]['thumb'];  
185.             if(thumb==''){  
186.                 $('#thumb'+(j+1)+'-'+(i+1)).html('<img id="net" src="img/net.png" /><a href="'+url+'"><div class="title">'+title+'</div></a>');  
187.             }  
188.             else{  
189.                 $('#thumb'+(j+1)+'-'+(i+1)).html('<a href="'+url+'"><img src="http://developer.51cto.com/exp/code/img/thumb/'+thumb+'" /></a>');  
190.             }  
191.         };  
192.     };  
193.       
194.     $('#search-engine').click(function() {  
195.         $('#engines').fadeToggle('fast','circEaseOut');  
196.         $('#wrapper1 input:text').css('background','#fff');  
197.     });  
198.       
199.     $('#google').click(function() {  
200.         $('#wrapper1 form').attr('action','https://www.google.com/search');  
201.         $('#engines').fadeToggle('fast','circEaseOut');  
202.         $('#wrapper1 #search-engine').css('background','#fff url(img/google.png) center center no-repeat');  
203.         $('#wrapper1 input:hidden').detach();  
204.         $('#wrapper1 input:first').attr('name','q');  
205.         $('#wrapper1 input:text').focus();  
206.     });  
207.     ……  
208. }); 

源码下载：Win8_style_web_start_page_and_config.rar

改造后的示例：http://www.mayixue.com/demo/win8page/index.htm

示例代码：Win8StartScreen.rar

在这里感谢原作者，记录下来留个念想。