特效介绍
局部切换和整体切换的jquery图片切换效果：鼠标移动到任意一张图片，该区域的图片就会切换成别的图片，当鼠标点击任意一张图片时，所有图片都会进行切换。
使用方法
1、在head里面引入下面的css样式和js文件：1 | <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> |
2 | <script src="js/cufon-yui.js" type="text/javascript"></script> |
001 | <div id="hs_container" class="hs_container"> |
002 | <div class="hs_area hs_area1"> |
003 | <img class="hs_visible" src="images/area1/1.jpg" alt=""/> |
004 | <img src="images/area1/2.jpg" alt=""/> |
005 | <img src="images/area1/3.jpg" alt=""/> |
006 | </div> |
007 | <div class="hs_area hs_area2"> |
008 | <img class="hs_visible" src="images/area2/1.jpg" alt=""/> |
009 | <img src="images/area2/2.jpg" alt=""/> |
010 | <img src="images/area2/3.jpg" alt=""/> |
011 | </div> |
012 | <div class="hs_area hs_area3"> |
013 | <img class="hs_visible" src="images/area3/1.jpg" alt=""/> |
014 | <img src="images/area3/2.jpg" alt=""/> |
015 | <img src="images/area3/3.jpg" alt=""/> |
016 | </div> |
017 | <div class="hs_area hs_area4"> |
018 | <img class="hs_visible" src="images/area4/1.jpg" alt=""/> |
019 | <img src="images/area4/2.jpg" alt=""/> |
020 | <img src="images/area4/3.jpg" alt=""/> |
021 | </div> |
022 | <div class="hs_area hs_area5"> |
023 | <img class="hs_visible" src="images/area5/1.jpg" alt=""/> |
024 | <img src="images/area5/2.jpg" alt=""/> |
025 | <img src="images/area5/3.jpg" alt=""/> |
026 | </div> |
027 | </div> |
028 | <!-- The JavaScript --> |
029 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> |
030 | <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> |
031 | <script type="text/javascript"> |
032 | $(function() { |
033 | //custom animations to use |
034 | //in the transitions |
035 | var animations = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade']; |
036 | var total_anim = animations.length; |
037 | //just change this to one of your choice |
038 | var easeType = 'swing'; |
039 | //the speed of each transition |
040 | var animSpeed = 450; |
041 | //caching |
042 | var $hs_container = $('#hs_container'); |
043 | var $hs_areas = $hs_container.find('.hs_area'); |
044 | |
045 | //first preload all images |
046 | $hs_images = $hs_container.find('img'); |
047 | var total_images = $hs_images.length; |
048 | var cnt = 0; |
049 | $hs_images.each(function(){ |
050 | var $this = $(this); |
051 | $('<img/>').load(function(){ |
052 | ++cnt; |
053 | if(cnt == total_images){ |
054 | $hs_areas.each(function(){ |
055 | var $area = $(this); |
056 | //when the mouse enters the area we animate the current |
057 | //image (random animation from array animations), |
058 | //so that the next one gets visible. |
059 | //"over" is a flag indicating if we can animate |
060 | //an area or not (we don't want 2 animations |
061 | //at the same time for each area) |
062 | $area.data('over',true).bind('mouseenter',function(){ |
063 | if($area.data('over')){ |
064 | $area.data('over',false); |
065 | //how many images in this area? |
066 | var total = $area.children().length; |
067 | //visible image |
068 | var $current = $area.find('img:visible'); |
069 | //index of visible image |
070 | var idx_current = $current.index(); |
071 | //the next image that's going to be displayed. |
072 | //either the next one, or the first one if the current is the last |
073 | var $next = (idx_current == total-1) ? $area.children(':first') : $current.next(); |
074 | //show next one (not yet visible) |
075 | $next.show(); |
076 | //get a random animation |
077 | var anim = animations[Math.floor(Math.random()*total_anim)]; |
078 | switch(anim){ |
079 | //current slides out from the right |
080 | case 'right': |
081 | $current.animate({ |
082 | 'left':$current.width()+'px' |
083 | }, |
084 | animSpeed, |
085 | easeType, |
086 | function(){ |
087 | $current.hide().css({ |
088 | 'z-index' : '1', |
089 | 'left' : '0px' |
090 | }); |
091 | $next.css('z-index','9999'); |
092 | $area.data('over',true); |
093 | }); |
094 | break; |
095 | //current slides out from the left |
096 | case 'left': |
097 | $current.animate({ |
098 | 'left':-$current.width()+'px' |
099 | }, |
100 | animSpeed, |
101 | easeType, |
102 | function(){ |
103 | $current.hide().css({ |
104 | 'z-index' : '1', |
105 | 'left' : '0px' |
106 | }); |
107 | $next.css('z-index','9999'); |
108 | $area.data('over',true); |
109 | }); |
110 | break; |
111 | //current slides out from the top |
112 | case 'top': |
113 | $current.animate({ |
114 | 'top':-$current.height()+'px' |
115 | }, |
116 | animSpeed, |
117 | easeType, |
118 | function(){ |
119 | $current.hide().css({ |
120 | 'z-index' : '1', |
121 | 'top' : '0px' |
122 | }); |
123 | $next.css('z-index','9999'); |
124 | $area.data('over',true); |
125 | }); |
126 | break; |
127 | //current slides out from the bottom |
128 | case 'bottom': |
129 | $current.animate({ |
130 | 'top':$current.height()+'px' |
131 | }, |
132 | animSpeed, |
133 | easeType, |
134 | function(){ |
135 | $current.hide().css({ |
136 | 'z-index' : '1', |
137 | 'top' : '0px' |
138 | }); |
139 | $next.css('z-index','9999'); |
140 | $area.data('over',true); |
141 | }); |
142 | break; |
143 | //current slides out from the right and fades out |
144 | case 'rightFade': |
145 | $current.animate({ |
146 | 'left':$current.width()+'px', |
147 | 'opacity':'0' |
148 | }, |
149 | animSpeed, |
150 | easeType, |
151 | function(){ |
152 | $current.hide().css({ |
153 | 'z-index' : '1', |
154 | 'left' : '0px', |
155 | 'opacity' : '1' |
156 | }); |
157 | $next.css('z-index','9999'); |
158 | $area.data('over',true); |
159 | }); |
160 | break; |
161 | //current slides out from the left and fades out |
162 | case 'leftFade': |
163 | $current.animate({ |
164 | 'left':-$current.width()+'px','opacity':'0' |
165 | }, |
166 | animSpeed, |
167 | easeType, |
168 | function(){ |
169 | $current.hide().css({ |
170 | 'z-index' : '1', |
171 | 'left' : '0px', |
172 | 'opacity' : '1' |
173 | }); |
174 | $next.css('z-index','9999'); |
175 | $area.data('over',true); |
176 | }); |
177 | break; |
178 | //current slides out from the top and fades out |
179 | case 'topFade': |
180 | $current.animate({ |
181 | 'top':-$current.height()+'px', |
182 | 'opacity':'0' |
183 | }, |
184 | animSpeed, |
185 | easeType, |
186 | function(){ |
187 | $current.hide().css({ |
188 | 'z-index' : '1', |
189 | 'top' : '0px', |
190 | 'opacity' : '1' |
191 | }); |
192 | $next.css('z-index','9999'); |
193 | $area.data('over',true); |
194 | }); |
195 | break; |
196 | //current slides out from the bottom and fades out |
197 | case 'bottomFade': |
198 | $current.animate({ |
199 | 'top':$current.height()+'px', |
200 | 'opacity':'0' |
201 | }, |
202 | animSpeed, |
203 | easeType, |
204 | function(){ |
205 | $current.hide().css({ |
206 | 'z-index' : '1', |
207 | 'top' : '0px', |
208 | 'opacity' : '1' |
209 | }); |
210 | $next.css('z-index','9999'); |
211 | $area.data('over',true); |
212 | }); |
213 | break; |
214 | default: |
215 | $current.animate({ |
216 | 'left':-$current.width()+'px' |
217 | }, |
218 | animSpeed, |
219 | easeType, |
220 | function(){ |
221 | $current.hide().css({ |
222 | 'z-index' : '1', |
223 | 'left' : '0px' |
224 | }); |
225 | $next.css('z-index','9999'); |
226 | $area.data('over',true); |
227 | }); |
228 | break; |
229 | } |
230 | } |
231 | }); |
232 | }); |
233 | |
234 | //when clicking the hs_container all areas get slided |
235 | //(just for fun...you would probably want to enter the site |
236 | //or something similar) |
237 | $hs_container.bind('click',function(){ |
238 | $hs_areas.trigger('mouseenter'); |
239 | }); |
240 | } |
241 | }).attr('src',$this.attr('src')); |
242 | }); |
243 | |
244 |
245 | }); |
246 | </script> |
1 | <img class="hs_visible" src="images/area5/1.jpg" alt=""/> |
2 | <img src="images/area5/2.jpg" alt=""/> |
3 | <img src="images/area5/3.jpg" alt=""/> |
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
