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

最新推荐文章于 2022-11-02 18:09:25 发布

置顶

最骚的就是你

最新推荐文章于 2022-11-02 18:09:25 发布

阅读量4.2k

点赞数

分类专栏： web前端学习文章标签：图片移动 pc 弹出层键盘

本文链接：https://blog.csdn.net/libin_1/article/details/51867794

版权

这是一个支持移动端和PC端的图片弹出层解决方案，具备键盘交互功能。提供了DEMO下载链接及源JS、CSS文件，核心JS分析包括手势滑动方向判断。该实现允许用户通过点击图片隐藏弹出层，并且DOM元素不限于a标签，可以通过自定义属性存大图地址。此外，还提到了一个用于触屏设备的jQuery插件。

摘要由CSDN通过智能技术生成

这里写图片描述

DEMO下载：http://download.csdn.net/detail/cometwo/9571755

下载：http://download.csdn.net/detail/cometwo/9576732

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />
        <title>jquery实现的触摸相册效果</title>
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/touchTouch.css" />
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
        <script type="text/javascript" src="js/touchTouch.jquery_xiugai.js"></script>
        <!--
            作者：1010305129@qq.com
            时间：2016-07-09
            描述：换我试试效果
            <script type="text/javascript" src="js/touchTouch.jquery官方的.js" ></script>
        -->
        <script type="text/javascript">
            $(function() {
    
                $('#thumbs a').touchTouch();
            });
        </script>
    </head>

    <body>
        <div id="thumbs">
            <a href="img/1.jpg" style="background-image:url(img/1.jpg)"></a>
            <a href="img/2.jpg" style="background-image:url(img/2.jpg)"></a>
            <a href="img/3.jpg" style="background-image:url(img/3.jpg)"></a>
            <a href="img/4.jpg" style="background-image:url(img/4.jpg)"></a>
            <a href="img/5.jpg" style="background-image:url(img/5.jpg)"></a>
            <a href="img/6.jpg" style="background-image:url(img/6.jpg)"></a>
        </div>
    </body>

</html>

原JS文件

/**
 * @name        jQuery touchTouch plugin
 * @author      Martin Angelov
 * @version     1.0
 * @url         http://tutorialzine.com/2012/04/mobile-touch-gallery/
 * @license     MIT License
 */

(function(){
   

    /* Private variables */

    var overlay = $('<div id="galleryOverlay">'),
        slider = $('<div id="gallerySlider">'),
        prevArrow = $('<a id="prevArrow"></a>'),
        nextArrow = $('<a id="nextArrow"></a>'),
        overlayVisible = false;


    /* Creating the plugin */

    $.fn.touchTouch = function(){
   

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

        // Appending the markup to the page
        overlay.hide().appendTo('body');
        slider.appendTo(overlay);

        // Creating a placeholder for each image
        items.each(function(){
   
            placeholders = placeholders.add($('<div class="placeholder">'));
        });

        // Hide the gallery if the background is touched / clicked
        slider.append(placeholders).on('click',function(e){
   
            if(!$(e.target).is('img')){
                hideOverlay();
            }
        });

        // Listen for touch events on the body and check if they
        // originated in #gallerySlider img - the images in the slider.
        $('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');
        });

        // Listening for clicks on the thumbnails

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

            // Find the position of this image
            // in the collection

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

            // Preload the next image
            preload(index+1);

            // Preload the previous
            preload(index-1);

        });

        // If the browser does not have support 
        // for touch, display the arrows
        if ( !("ontouchstart" in window) ){
            overlay.append(prevArrow).append(nextArrow);

            prevArrow.click(