思洋互动网站建设学前班

Javascript
广州网站建设,网站建设,广州网页设计,广州网站设计

1. $(function(){  
2.       
3.     /* Configuration */ 
4.       
5.     var APPID = 'fa2pT26k';        // Your Yahoo APP id  
6.     var DEG = 'c';        // c for celsius, f for fahrenheit  
7.       
8.     // Mapping the weather codes returned by Yahoo's API  
9.     // to the correct icons in the img/icons folder  
10.       
11.     var weatherIconMap = [  
12.         'storm', 'storm', 'storm', 'lightning', 'lightning', 'snow', 'hail', 'hail',  
13.         'drizzle', 'drizzle', 'rain', 'rain', 'rain', 'snow', 'snow', 'snow', 'snow',  
14.         'hail', 'hail', 'fog', 'fog', 'fog', 'fog', 'wind', 'wind', 'snowflake',  
15.         'cloud', 'cloud_moon', 'cloud_sun', 'cloud_moon', 'cloud_sun', 'moon', 'sun',  
16.         'moon', 'sun', 'hail', 'sun', 'lightning', 'lightning', 'lightning', 'rain',  
17.         'snowflake', 'snowflake', 'snowflake', 'cloud', 'rain', 'snow', 'lightning' 
18.     ];  
19.       
20.     var weatherDiv = $('#weather'),  
21.         scroller = $('#scroller'),  
22.         location = $('p.location');  
23.       
24.     // Does this browser support geolocation?  
25.     if (navigator.geolocation) {  
26.         navigator.geolocation.getCurrentPosition(locationSuccess, locationError);  
27.     }  
28.     else{  
29.         showError("Your browser does not support Geolocation!");  
30.     }  
31.       
32.     // Get user's location, and use Yahoo's PlaceFinder API  
33.     // to get the location name, woeid and weather forecast  
34.       
35.     function locationSuccess(position) {  
36.         var lat = position.coords.latitude;  
37.         var lon = position.coords.longitude;  
38.  
39.         // Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/  
40.         // We are passing the R gflag for reverse geocoding (coordinates to place name)  
41.         var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;  
42.           
43.         // Forming the query for Yahoo's weather forecasting API with YQL  
44.         // http://developer.yahoo.com/weather/  
45.           
46.         var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',  
47.             weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',  
48.             code, city, results, woeid;  
49.           
50.         if (window.console && window.console.info){  
51.             console.info("Coordinates: %f %f", lat, lon);  
52.         }  
53.           
54.         // Issue a cross-domain AJAX request (CORS) to the GEO service.  
55.         // Not supported in Opera and IE.  
56.         $.getJSON(geoAPI, function(r){  
57.              
58.             if(r.ResultSet.Found == 1){  
59.                   
60.                 results = r.ResultSet.Results;  
61.                 city = results[0].city;  
62.                 code = results[0].statecode || results[0].countrycode;  
63.           
64.                 // This is the city identifier for the weather API  
65.                 woeid = results[0].woeid;  
66.       
67.                 // Make a weather API request:  
68.                 $.getJSON(weatherYQL.replace('WID',woeid), function(r){  
69.                       
70.                     if(r.query && r.query.count == 1){  
71.                           
72.                         // Create the weather items in the #scroller UL  
73.                           
74.                         var item = r.query.results.channel.item.condition;  
75.                           
76.                         if(!item){  
77.                             showError("We can't find weather information about your city!");  
78.                             if (window.console && window.console.info){  
79.                                 console.info("%s, %s; woeid: %d", city, code, woeid);  
80.                             }  
81.                               
82.                             return false;  
83.                         }  
84.                           
85.                         addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');  
86.                           
87.                         for (var i=0;i<2;i++){  
88.                             item = r.query.results.channel.item.forecast[i];  
89.                             addWeather(  
90.                                 item.code,   
91.                                 item.day +' <b>'+item.date.replace('\d+$','')+'</b>',  
92.                                 item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>' 
93.                             );  
94.                         }  
95.                           
96.                         // Add the location to the page  
97.                         location.html(city+', <b>'+code+'</b>');  
98.                           
99.                         weatherDiv.addClass('loaded');  
100.                           
101.                         // Set the slider to the first slide  
102.                         showSlide(0);  
103.                      
104.                     }  
105.                     else {  
106.                         showError("Error retrieving weather data!");  
107.                     }  
108.                 });  
109.           
110.             }  
111.               
112.         }).error(function(){  
113.             showError("Your browser does not support CORS requests!");  
114.         });  
115.          
116.     }  
117.       
118.     function addWeather(code, day, condition){  
119.           
120.         var markup = '<li>'+  
121.             '<img src="assets/img/icons/'+ weatherIconMap[code] +'.png" />'+  
122.             ' <p class="day">'+ day +'</p> <p class="cond">'+ condition +  
123.             '</p></li>';  
124.           
125.         scroller.append(markup);  
126.     }  
127.       
128.     /* Handling the previous / next arrows */ 
129.       
130.     var currentSlide = 0;  
131.     weatherDiv.find('a.previous').click(function(e){  
132.         e.preventDefault();  
133.         showSlide(currentSlide-1);  
134.     });  
135.       
136.     weatherDiv.find('a.next').click(function(e){  
137.         e.preventDefault();  
138.         showSlide(currentSlide+1);  
139.     });  
140.       
141.       
142.     function showSlide(i){  
143.         var items = scroller.find('li');  
144.           
145.         if (i >= items.length || i < 0 || scroller.is(':animated')){  
146.             return false;  
147.         }  
148.           
149.         weatherDiv.removeClass('first last');  
150.           
151.         if(i == 0){  
152.             weatherDiv.addClass('first');  
153.         }  
154.         else if (i == items.length-1){  
155.             weatherDiv.addClass('last');  
156.         }  
157.           
158.         scroller.animate({left:(-i*100)+'%'}, function(){  
159.             currentSlide = i;  
160.         });  
161.     }  
162.       
163.     /* Error handling functions */ 
164.       
165.     function locationError(error){  
166.         switch(error.code) {  
167.             case error.TIMEOUT:  
168.                 showError("A timeout occured! Please try again!");  
169.                 break;  
170.             case error.POSITION_UNAVAILABLE:  
171.                 showError('We can\'t detect your location. Sorry!');  
172.                 break;  
173.             case error.PERMISSION_DENIED:  
174.                 showError('Please allow geolocation access for this to work.');  
175.                 break;  
176.             case error.UNKNOWN_ERROR:  
177.                 showError('An unknown error occured!');  
178.                 break;  
179.         }  
180.           
181.     }  
182.       
183.     function showError(msg){  
184.         weatherDiv.addClass('error').html(msg);  
185.     }  
186.  
187. }); 

搞定！具体演示请参考在线Demo，希望大家喜欢这个web应用！
广州网站建设,网站建设,广州网页设计,广州网站设计