HoverSlideEffect:鼠标移上去切换图片的jQuery特效
- 作者:网页模板
- 大小:0.494MB
- 点击次数:
- 发布时间:2014-07-18 17:57
特效介绍
HoverSlideEffect,一款非常漂亮的jQuery图片切换插件,鼠标移动到图片上,就会切换成另一张图片。点击任意一张图片,图片相册的所有图片都会切换。使用方法
1.在head引入style.css。2.html代码:
<div id="hs_container" class="hs_container"> <div class="hs_area hs_area1"> <img class="hs_visible" src="images/area1/1.jpg" alt=""/> <img src="images/area1/2.jpg" alt=""/> <img src="images/area1/3.jpg" alt=""/> </div> <div class="hs_area hs_area2"> <img class="hs_visible" src="images/area2/1.jpg" alt=""/> <img src="images/area2/2.jpg" alt=""/> <img src="images/area2/3.jpg" alt=""/> </div> <div class="hs_area hs_area3"> <img class="hs_visible" src="images/area3/1.jpg" alt=""/> <img src="images/area3/2.jpg" alt=""/> <img src="images/area3/3.jpg" alt=""/> </div> <div class="hs_area hs_area4"> <img class="hs_visible" src="images/area4/1.jpg" alt=""/> <img src="images/area4/2.jpg" alt=""/> <img src="images/area4/3.jpg" alt=""/> </div> <div class="hs_area hs_area5"> <img class="hs_visible" src="images/area5/1.jpg" alt=""/> <img src="images/area5/2.jpg" alt=""/> <img src="images/area5/3.jpg" alt=""/> </div> </div>注:class为“hs_visible”为该区域载入时默认显示的图片。
3、js代码:
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { var animations = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade']; var total_anim = animations.length; var easeType = 'swing'; var animSpeed = 450; var $hs_container = $('#hs_container'); var $hs_areas = $hs_container.find('.hs_area'); $hs_images = $hs_container.find('img'); var total_images = $hs_images.length; var cnt = 0; $hs_images.each(function(){ var $this = $(this); $('<img/>').load(function(){ ++cnt; if(cnt == total_images){ $hs_areas.each(function(){ var $area= $(this); $area.data('over',true).bind('mouseenter',function(){ if($area.data('over')){ $area.data('over',false); var total = $area.children().length; var $current = $area.find('img:visible'); var idx_current = $current.index(); var $next = (idx_current == total-1) ? $area.children(':first') : $current.next(); $next.show(); var anim = animations[Math.floor(Math.random()*total_anim)]; switch(anim){ case 'right': $current.animate({ 'left':$current.width()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'left': $current.animate({ 'left':-$current.width()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'top': $current.animate({ 'top':-$current.height()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'bottom': $current.animate({ 'top':$current.height()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'rightFade': $current.animate({ 'left':$current.width()+'px', 'opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'leftFade': $current.animate({ 'left':-$current.width()+'px','opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'topFade': $current.animate({ 'top':-$current.height()+'px', 'opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; case 'bottomFade': $current.animate({ 'top':$current.height()+'px', 'opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; default: $current.animate({ 'left':-$current.width()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; } } }); }); $hs_container.bind('click',function(){ $hs_areas.trigger('mouseenter'); }); } }).attr('src',$this.attr('src')); }); }); </script>
- 本文标签:
- HoverSlideEffect,jQuery图片切换