支持移动端，PC 端图片弹出层（支持键盘）

iDo
892 阅读1分钟
原文链接： blog.csdn.net

这里写图片描述
这里写图片描述

DEMO下载：download.csdn.net/detail/come…

下载：download.csdn.net/detail/come…




    
        
        
        jquery实现的触摸相册效果
        
        
        
        
        
        
            $(function() {
                $('#thumbs a').touchTouch();
            });

原JS文件



(function(){

    

    var overlay = $('
'
),
        slider = $('
'
),
        prevArrow = $(''),
        nextArrow = $(''),
        overlayVisible = false;


    

    $.fn.touchTouch = function(){

        var placeholders = $([]),
            index = 0,
            items = this;

        
        overlay.hide().appendTo('body');
        slider.appendTo(overlay);

        
        items.each(function(){
            placeholders = placeholders.add($('
'
));
        });

        
        slider.append(placeholders).on('click',function(e){
            if(!$(e.target).is('img')){
                hideOverlay();
            }
        });

        
        
        $('body').on('touchstart', '#gallerySlider img', function(e){

            var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;

            slider.on('touchmove',function(e){

                e.preventDefault();

                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];

                if(touch.pageX - startX > 10){
                    slider.off('touchmove');
                    showPrevious();
                }
                else if (touch.pageX - startX < -10){
                    slider.off('touchmove');
                    showNext();
                }
            });

            
            
            return false;

        }).on('touchend',function(){
            slider.off('touchmove');
        });

        

        items.on('click', function(e){
            e.preventDefault();

            
            

            index = items.index(this);
            showOverlay(index);
            showImage(index);

            
            preload(index+1);

            
            preload(index-1);

        });

        
        
        if ( !("ontouchstart" in window) ){
            overlay.append(prevArrow).append(nextArrow);

            prevArrow.click(function(e){
                e.preventDefault();
                showPrevious();
            });

            nextArrow.click(function(e){
                e.preventDefault();
                showNext();
            });
        }

        
        $(window).bind('keydown', function(e){

            if (e.keyCode == 37){
                showPrevious();
            }
            else if (e.keyCode==39){
                showNext();
            }

        });


        


        function showOverlay(index){

            
            if (overlayVisible){
                return false;
            }

            
            overlay.show();

            setTimeout(function(){
                
                overlay.addClass('visible');
            }, 100);

            
            offsetSlider(index);

            
            overlayVisible = true;
        }

        function hideOverlay(){
            
            if(!overlayVisible){
                return false;
            }

            
            overlay.hide().removeClass('visible');
            overlayVisible = false;
        }

        function offsetSlider(index){
            
            slider.css('left',(-index*100)+'%');
        }

        
        function preload(index){
            setTimeout(function(){
                showImage(index);
            }, 1000);
        }

        
        function showImage(index){

            
            if(index < 0 || index >= items.length){
                return false;
            }

            
            loadImage(items.eq(index).attr('href'), function(){
                placeholders.eq(index).html(this);
            });
        }

        
        

        function loadImage(src, callback){
            var img = $('').on('load', function(){
                callback.call(img);
            });

            img.attr('src',src);
        }

        function showNext(){

            
            if(index+1 < items.length){
                index++;
                offsetSlider(index);
                preload(index+1);
            }
            else{
                

                slider.addClass('rightSpring');
                setTimeout(function(){
                    slider.removeClass('rightSpring');
                },500);
            }
        }

        function showPrevious(){

            
            if(index>0){
                index--;
                offsetSlider(index);
                preload(index-1);
            }
            else{
                

                slider.addClass('leftSpring');
                setTimeout(function(){
                    slider.removeClass('leftSpring');
                },500);
            }
        }
    };

})(jQuery);

原css文件

.animation29 {
    -webkit-animation: bounceIn .3s .2s ease both;
    -moz-animation: bounceIn .3s .2s ease both;
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.05)
    }
    10% {
        -webkit-transform: scale(.1)
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(.2)
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.3)
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(.4)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(.5)
    }
    60% {
        -webkit-transform: scale(.6)
    }
    70% {
        -webkit-transform: scale(.7)
    }
    80% {
        -webkit-transform: scale(.8)
    }
    90% {
        -webkit-transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.05)
    }
    10% {
        -webkit-transform: scale(.1)
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(.2)
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.3)
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(.4)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(.5)
    }
    60% {
        -webkit-transform: scale(.6)
    }
    70% {
        -webkit-transform: scale(.7)
    }
    80% {
        -webkit-transform: scale(.8)
    }
    90% {
        -webkit-transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1)
    }
}




.animation34 {
    -webkit-animation: bounceOut .3s .2s ease both;
    -moz-animation: bounceOut .3s .2s ease both;
}

@-webkit-keyframes bounceOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1)
    }
    10% {
        -webkit-transform: scale(.9)
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.7)
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(.6)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(.5)
    }
    60% {
        -webkit-transform: scale(.4)
    }
    70% {
        -webkit-transform: scale(.3)
    }
    80% {
        -webkit-transform: scale(.2)
    }
    90% {
        -webkit-transform: scale(.1)
    }
    100% {
        display: none;
        -webkit-transform: scale(0)
    }
}

@-moz-keyframes bounceOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1)
    }
    10% {
        -webkit-transform: scale(.9)
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.7)
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(.6)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(.5)
    }
    60% {
        -webkit-transform: scale(.4)
    }
    70% {
        -webkit-transform: scale(.3)
    }
    80% {
        -webkit-transform: scale(.2)
    }
    90% {
        -webkit-transform: scale(.1)
    }
    100% {

        -webkit-transform: scale(0)
    }
}




#galleryOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 100000;
    background-color: #222;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: none;
    -moz-transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}




#galleryOverlay.visible {
    opacity: 1;
}

#gallerySlider {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    white-space: nowrap;
    position: absolute;
    -moz-transition: left 0.4s ease;
    -webkit-transition: left 0.4s ease;
    transition: left 0.4s ease;
}

#gallerySlider .placeholder {
    background-color: rgba(0, 0, 0, 0.8);
    background: url(../img/preloader.gif) no-repeat center center;
    height: 100%;
    line-height: 1px;
    text-align: center;
    width: 100%;
    display: inline-block;
}




#gallerySlider .placeholder:before {
    content: "";
    display: inline-block;
    height: 50%;
    width: 1px;
    margin-right: -1px;
}

#gallerySlider .placeholder img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}

#gallerySlider.rightSpring {
    -moz-animation: rightSpring 0.3s;
    -webkit-animation: rightSpring 0.3s;
}

#gallerySlider.leftSpring {
    -moz-animation: leftSpring 0.3s;
    -webkit-animation: leftSpring 0.3s;
}




@-moz-keyframes rightSpring {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: -30px;
    }
    100% {
        margin-left: 0px;
    }
}

@-moz-keyframes leftSpring {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: 30px;
    }
    100% {
        margin-left: 0px;
    }
}




@-webkit-keyframes rightSpring {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: -30px;
    }
    100% {
        margin-left: 0px;
    }
}

@-webkit-keyframes leftSpring {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: 30px;
    }
    100% {
        margin-left: 0px;
    }
}




#prevArrow,
#nextArrow {
    border: none;
    text-decoration: none;
    background: url(../img/arrows.png) no-repeat;
    opacity: 0.5;
    cursor: pointer;
    position: absolute;
    width: 43px;
    height: 58px;
    top: 50%;
    margin-top: -29px;
    -moz-transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

#prevArrow:hover,
#nextArrow:hover {
    opacity: 1;
}

#prevArrow {
    background-position: left top;
    left: 40px;
}

#nextArrow {
    background-position: right top;
    right: 40px;
}

核心JS分析，可以判断手势滑动方向

$('body').on('click', '.placeholder img', function(e) {
    
});

$('body').on('touchstart', '#gallerySlider img', function(e) {
            var touch = e.originalEvent,
            startX = touch.changedTouches[0].pageX;
            startY = touch.changedTouches[0].pageY;
            slider.on('touchmove', function(e) {
                e.preventDefault();
                touch = e.originalEvent.touches[0] ||
                    e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                    console.log("右划");
                    slider.off('touchmove');
                    showPrevious();
                } else if (touch.pageX - startX < -10) {
                    console.log("左划");
                    slider.off('touchmove');
                    showNext();
                };
                if (touch.pageY - startY > 10) {
                    console.log("下划");
                } else if (touch.pageY - startY < -10) {
                    console.log("上划");
                };
            });

            
            
            return false;

        }).on('touchend', function() {
            slider.off('touchmove');
        });

如果想点击图片就隐藏

$('body').on('click', '.placeholder img', function(e) {
                hideOverlay();
});

    /*把他注掉，因为touchstart优先发生
                $('body').on('touchstart', '#gallerySlider img', function(e){

            var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;

            slider.on('touchmove',function(e){

                e.preventDefault();

                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];

                if(touch.pageX - startX > 10){
                    slider.off('touchmove');
                    showPrevious();
                }
                else if (touch.pageX - startX < -10){
                    slider.off('touchmove');
                    showNext();
                }
            });

                // Return false to prevent image 
                // highlighting on Android
            return false;

        }).on('touchend', function() {
        slider.off('touchmove');
    });
*/

其实DOM不局限于a标签，sb（傻逼）属性存大图地址


    

        

            

            

        
        

            

            

        
        

            

            

        
    

$(function() {
    $(".tupian p").touchTouch();
});

修改库文件：

function showImage(index) {

        // If the index is outside the bonds of the array
        if (index < 0 || index >= items.length) {
            return false;
        }

        // Call the load function with the href attribute of the item
        loadImage(items.eq(index).attr('sb'), function() {
            placeholders.eq(index).html(this);
        });
    }

#有一个jQuery插件plugins.jquery.com/jTap/插件：download.csdn.net/detail/come…

avatar
文章
阅读
粉丝