我爱模板网 > 特效插件 > 滚动轮播 >  HoverSlideEffect:鼠标移上去切换图片的jQuery特效正文

HoverSlideEffect:鼠标移上去切换图片的jQuery特效

特效介绍
HoverSlideEffect

    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>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Flash翻书效果相册轮播插件——FlippingBook 下一篇:卡哇伊相册LovelyGallery源码 jQuery相册代码
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢