2. 程式人生 > >仿微信朋友圈圖片點選放大效果

仿微信朋友圈圖片點選放大效果

阿新 • • 發佈：2019-01-23

這兩天寫了個小專案，其中用到了點選一組圖片中的一張可以檢視它的放大版，用手向左滑動能看到下一張的這組圖片中的第二張的放大版。。。依次類推，單擊放大版的圖片實現關閉效果，對於js能力不太好的我只能找度娘，然後就發現了photoswiper.js，不得不說真的好用，下面我就簡單說下用法。
首先，和使用其他外掛一樣找到必須的資源也就是css,js等必須的檔案，然後引入它們，並且引入自己在專案中肯定會用到的基礎檔案比如jq.和自己寫的css檔案比如style.css這個名字是你自己取的，可隨意，最好結合專案取名。

<link rel="stylesheet" type="text/css"
 
 href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin/default-skin.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/photoswipe.js"></script>//實際應用時最好引入壓縮版min.js(css同理)
<script
 
 src="js/photoswipe-ui-default.min.js"></script>

其次，在需要實現此效果的圖片組外層加入下面這些結構：

<div class="my-gallery" data-pswp-uid="1">
    <div>
        <a href="images/3.png" data-size="750x980">
            <img style="height:100%;" src="images/1.png">
        </a>
    </div>
 

    <div>
        <a href="images/3.png" data-size="750x980">
            <img style="height:100%;" src="images/2.png">
        </a>
    </div>
    <div>
        <a href="images/3.png" data-size="750x980">
            <img style="height:100%;" src="images/3.png">
        </a>
    </div>
</div>

其實最重要的就是class=”my-gallery” data-pswp-uid=”1”和也是和photoswiper.js產生關聯的鑰匙其中a標籤裡面的data-size是設定展示的放大圖的大小的，而href指向這個圖，一般是原圖。如果你想給展示的放大圖新增附加資訊，你可以在最外層div下再巢狀一層div,當然這個你可以依據設計需求自己改寫頁面結構在style.css中重置default-skin.css或photoswipe.css中的某些樣式或者書寫自己想要的樣式，但是上述的關鍵鑰匙必須存在。
然後，將下面這段程式碼完整的貼上到你的頁面中（這是放大版的結構設定以及一些小元件，比如分享按鈕，關閉按鈕等）：

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>

其次，將下面核心的js程式碼全部貼上過去（需要實現的小功能基本上都有，或者在api上找到相應的然後新增到引數裡即可，比如實現單擊放大的圖片就退回原來的小圖功能就是options裡面的tapToClose設定為true即可，如果不需要這個功能設定為false或者直接刪除這一行程式碼即可。）：

var initPhotoSwipeFromDOM = function(gallerySelector) {

    // 解析來自DOM元素幻燈片資料（URL，標題，大小...）
    // (children of gallerySelector)
    var parseThumbnailElements = function(el) {
        var thumbElements = el.childNodes,
            numNodes = thumbElements.length,
            items = [],
            figureEl,
            linkEl,
            size,
            item,
            divEl;

        for(var i = 0; i < numNodes; i++) {

            figureEl = thumbElements[i]; // <figure> element

            // 僅包括元素節點
            if(figureEl.nodeType !== 1) {
                continue;
            }
            divEl = figureEl.children[0];
            linkEl = divEl.children[0]; // <a> element

            size = linkEl.getAttribute('data-size').split('x');

            // 建立幻燈片物件
            item = {
                src: linkEl.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10)
            };



            if(figureEl.children.length > 1) {
                // <figcaption> content
                item.title = figureEl.children[1].innerHTML; 
            }

            if(linkEl.children.length > 0) {
                // <img> 縮圖節點, 檢索縮圖網址
                item.msrc = linkEl.children[0].getAttribute('src');
            } 

            item.el = figureEl; // 儲存連結元素 for getThumbBoundsFn
            items.push(item);
        }

        return items;
    };

    // 查詢最近的父節點
    var closest = function closest(el, fn) {
        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
    };

    // 當用戶點選縮圖觸發
    var onThumbnailsClick = function(e) {
        e = e || window.event;
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var eTarget = e.target || e.srcElement;

        // find root element of slide
        var clickedListItem = closest(eTarget, function(el) {
            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
        });

        if(!clickedListItem) {
            return;
        }

        // find index of clicked item by looping through all child nodes
        // alternatively, you may define index via data- attribute
        var clickedGallery = clickedListItem.parentNode,
            childNodes = clickedListItem.parentNode.childNodes,
            numChildNodes = childNodes.length,
            nodeIndex = 0,
            index;

        for (var i = 0; i < numChildNodes; i++) {
            if(childNodes[i].nodeType !== 1) { 
                continue; 
            }

            if(childNodes[i] === clickedListItem) {
                index = nodeIndex;
                break;
            }
            nodeIndex++;
        }



        if(index >= 0) {
            // open PhotoSwipe if valid index found
            openPhotoSwipe( index, clickedGallery );
        }
        return false;
    };

    // parse picture index and gallery index from URL (#&pid=1&gid=2)
    var photoswipeParseHash = function() {
        var hash = window.location.hash.substring(1),
        params = {};

        if(hash.length < 5) {
            return params;
        }

        var vars = hash.split('&');
        for (var i = 0; i < vars.length; i++) {
            if(!vars[i]) {
                continue;
            }
            var pair = vars[i].split('=');  
            if(pair.length < 2) {
                continue;
            }           
            params[pair[0]] = pair[1];
        }

        if(params.gid) {
            params.gid = parseInt(params.gid, 10);
        }

        return params;
    };

    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
            gallery,
            options,
            items;

        items = parseThumbnailElements(galleryElement);

        // 這裡可以定義引數
        options = {
          barsSize: { 
            top: 100,
            bottom: 100
          }, 
           fullscreenEl : false,
           //點選圖片關閉
           tapToClose: true,
            shareButtons: [
            {id:'wechat', label:'分享微信', url:'#'},
            {id:'weibo', label:'新浪微博', url:'#'},
            {id:'download', label:'儲存圖片', url:'{{raw_image_url}}', download:true}
            ],

            // define gallery index (for URL)
            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

            getThumbBoundsFn: function(index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect(); 

                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }

        };

        // PhotoSwipe opened from URL
        if(fromURL) {
            if(options.galleryPIDs) {
                // parse real index when custom PIDs are used 
                for(var j = 0; j < items.length; j++) {
                    if(items[j].pid == index) {
                        options.index = j;
                        break;
                    }
                }
            } else {
                // in URL indexes start from 1
                options.index = parseInt(index, 10) - 1;
            }
        } else {
            options.index = parseInt(index, 10);
        }

        // exit if index not found
        if( isNaN(options.index) ) {
            return;
        }

        if(disableAnimation) {
            options.showAnimationDuration = 0;
        }

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    };

    // loop through all gallery elements and bind events
    var galleryElements = document.querySelectorAll( gallerySelector );

    for(var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i+1);
        galleryElements[i].onclick = onThumbnailsClick;
    }

    // Parse URL and open gallery if it contains #&pid=3&gid=1
    var hashData = photoswipeParseHash();
    if(hashData.pid && hashData.gid) {
        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
    }
    };

    // execute above function
    initPhotoSwipeFromDOM('.my-gallery');


//  $(".hairImg>div").each(function(){
//      $(this).height($(this).width());
//  });
    function more(obj,id) {
        if ($('#txt'+id).is(":hidden")) {
            $('#p'+id).hide();
            $('#txt'+id).show();
            obj.innerHTML='收起';
        } else {
            $('#p'+id).show();
            $('#txt'+id).hide();
            obj.innerHTML='全文';
        }
    }

最後，展示下我的demo效果圖：
設計原圖
點選裡面的任意一張小圖出現的效果（單擊圖片會回到第一張截圖的狀態）
好了，這就是所有的乾貨，希望對你們有所幫助。貌似photoswiper.js api裡面有更簡化的，小夥伴們也可以去讀一下api。相關檔案的下載地址可以去Github:點選這裡

相關推薦

仿微信朋友圈圖片點選放大效果

這兩天寫了個小專案，其中用到了點選一組圖片中的一張可以檢視它的放大版，用手向左滑動能看到下一張的這組圖片中的第二張的放大版。。。依次類推，單擊放大版的圖片實現關閉效果，對於js能力不太好的我只能找度娘，然後就發現了photoswiper.js，不得不說真的好用，

微信小程式圖片點選放大

WXML <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{i

仿微信朋友圈回覆資訊-點選空白處軟鍵盤以及回覆佈局消失

開啟微信朋友圈，點選回覆按鈕，會立馬跳出一個回覆欄和一個軟鍵盤，點選其他空白處這2個又消失了。這種功能我們怎麼實現呢？ 類似下面這種功能，由於用的是夜神模擬器，沒有軟鍵盤，大家可以自行腦補，或者去自己的朋友圈看看效果。 思路是這樣的：點選這個回覆狀態列以外的其他區域，讓這

Android實現仿微信朋友圈釋出動態（拍照、相簿選擇、照片壓縮、顯示、儲存、縮圖、點選縮圖刪除對應檔案等）附原始碼

         原創作品，轉載請註明出處：http://blog.csdn.net/zhang3776813/article/details/52092591 最近專案需求中要用到類似微信朋友圈釋出動態選擇圖片的UI效果，研究了一下，特來分享成果，多的不說來看程式碼。

Luban（魯班） —— Android圖片壓縮工具，仿微信朋友圈壓縮策略。

專案描述 目前做App開發總繞不開圖片這個元素。但是隨著手機拍照解析度的提升，圖片的壓縮成為一個很重要的問題。單純對圖片進行裁切，壓縮已經有很多文章介紹。但是裁切成多少，壓縮成多少卻很難控制好，裁切過頭圖片太小，質量壓縮過頭則顯示效果太差。 於是自然想到App巨頭“微信”會是怎麼處理，

Android仿微信朋友圈九宮格圖片展示自定義控制元件，支援縮放動畫~

一直對微信朋友圈九宮格圖片顯示控制元件比較好奇，找到一篇介紹相關騷操作的部落格 部落格雖好但是不夠完美，缺少點選圖片預覽頁面和縮放動畫，作為一個不斷追求完美主義的人，我想把這個控制元件結合到專案中而不是單純作為一個控制元件。 下面是我的實現效果圖： （

仿微信朋友圈檢視圖片下拽返回。整合輕鬆，效果超讚~

ImageWatcher 大圖檢視，它能夠 動畫順暢切換到檢視狀態，同樣動畫順暢退出檢視介面 左右滑動多圖檢視 仿微信下拽退出     對比之前1.0.3, 修復-寬高計算錯誤導致起

移動web HTML5使用photoswipe模仿微信朋友圈圖片放大瀏覽

默認 html5 ace 模仿 響應式 觸摸手勢 朋友圈 int 放大 http://www.cnblogs.com/theroad/p/5397229.html 使用js框架是PhotoSwipe。 PhotoSwipe是一個圖片放大插件，兼容pc和移動端，經歷過多個版本

Android 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉刷新

樣式 post and 微信 修改 size roi 自定義 details 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉刷新Android 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉

CSS——微信朋友圈圖片樣式實現方法

spl absolut position url head density pad OS use <!DOCTYPE html> <html lang="en"> <head> <meta ch

canvas圖片文字自動合成---微信朋友圈圖片分享

canvas-Synthetic-picture canvas圖片合成，支援右鍵另存為 一、合成內容 1.圖片 背景圖 專屬二維碼 使用者頭像（圓形） 2.使用者名稱 二、專案地址 https://github.com/Sta

安卓專案實戰之仿微信朋友圈的九宮格自定義控制元件

效果圖 圖片展示形式 1、當只有1張圖時，可以自己定製圖片寬高，也可以使用預設九宮格的寬高； 2、當只有4張圖時，以2*2的方式顯示； 3、除以上兩種情況下，都是按照3列方式顯示，但這時有一些細節： a、如果只有9張圖，當然是以3*3的方式顯示；

仿微信朋友圈圖冊瀏覽及其擴充套件

書到用時方恨少 我很笨，歷時3天半，才把這個圖冊瀏覽的外掛搞定了。很感謝前輩寫完的外掛，不然我弄一個月也弄不出來。 功能點： 1、PC端的圖片要類似ppt，有放大但不失真功能（放大有了，圖片太小肯定會失真），可點選圖片和鍵盤控制翻頁； 2、移動端支援縮放、滑動，左右控制翻頁；

模仿微信朋友圈 圖片瀏覽 js javascript 支援圖片預覽，滑動切換，雙指縮放，圖片快取

previewImage-mobile 仿微信js-sdk wx.previewImage javascript實現，支援圖片預覽，滑動切換，雙指縮放，圖片快取; it is a plugin previewImage for mobile html5

Android仿微信朋友圈高清圖檢視控制元件可縮放、雙擊、移動

該庫支援和包含的功能： 1.圖片支援手勢操作, 可縮放、雙擊、移動 2.圖片載入時的進度條, 支援自定義 該庫的效果圖如下： 本地相簿圖片效果圖： 點選預覽大圖的效果 本想直接新增gradle依賴庫，不巧的是，之前版本已作廢，待現在版本穩定後，

仿微信 RadioButton 自定義點選效果

1.Android Studio 步驟: 1.選中drawable目錄後點擊滑鼠右鍵New-Drawable resource file，如圖: 2.輸入檔名稱，點選ok，如圖：

previewImage.js實現類似微信朋友圈圖片預覽功能

由於公司專案需要一個類似圖片預覽的效果就是圖片可以滑動切換，雙指縮放 公司封裝的存在相容性問題，在安卓上圖片放大後圖片上的字就模糊了，就在網上找到了previewImage.js 引用 previewImage.js 到你的專案中<script src="dist/p

仿微信朋友圈【九宮格的實現】

最近有個想法，想用環信的sdk去做個社交類的小demo玩。在此之前，先來模仿下微信的朋友圈九宮格效果。同時也相容了QQ的做法，如果資料集大於九張時，就在最後一張圖片上顯示一層遮罩效果，並顯示剩餘圖片的數量。之後的計劃是仿微信的朋友圈評論、回覆這方面的效果，在實際

仿微信朋友圈預覽功能

話不多說，先上圖主要功能就是如圖中所示，點選圖片放大，拖拽圖片縮小到列表中圖片位置處消失。這個功能其實原理是這樣的（我猜）：首先點選列表中的圖片跳轉到新的Acticity進行預覽，當然這個Activity必須是透明的；跳轉的時候需要將列表圖片的螢幕位置和寬高傳遞到新Activ

Android仿微信朋友圈10s視訊編輯

以前遇到一個需求就是要做一個類似微信朋友圈10s視訊上傳的功能，因此就需要視訊裁剪與壓縮，需要做一個類似微信朋友圈視訊編輯的頁面，就需要將視訊按照時間一秒一秒解碼成一幅幅的圖片，讓使用者滑動選擇。之前在網上找到了一個類似專案用的 MediaMetadat