移動端效果 — 點擊圖片全屏查看

在公眾號中提交服務需求工單后，經過“待分配”、“待執行”、“執行中”、“待驗收” 這些階段后，需要驗收人提交評論上傳圖片才能變成“已完成”。

做好后新增點擊圖片全屏查看的需求，剛開始使用的方法能夠做到，但是由於 jquery 的版本沖突，所以不得已換了現在的方法。

一、簡單例子。

<div class="add_photo">
        <ul>
            <li class="li_images">
                <img src="images/hd-img.jpg" class="item_img">
            </li>
            <li class="li_images">
                <img src="images/2.jpg" class="item_img">
            </li>
        </ul>
</div>

具體的樣式就不寫了，效果如果：

1、初始：

2、點擊預覽：

3、發現 bug ：

剛開始的時候沒有考慮太多，只是簡單的寫了預覽圖片的位置， FTP 上傳后在手機中試驗，預覽圖片的效果出來了，但是，如上圖所示 test 頁面沒有發生滾動，所以根本沒有察覺到問題。

當頁面有滾動時：給 class="add_photo"  的 div 設置 style="margin-top: 1000px;"  ，如下所示：

     

在滾動頁面時，，問題來了：

4、問題解決：

全屏預覽應該是不能再上下滑動的，所以應該在點擊目標圖片預覽時讓滾動失效，在收回預覽后恢復滾動事件。

二、修改版

最終修改后，如下：：：

<script type="text/javascript"> $.fn.ImgZoomIn = function () { var window_h = $(window).height(); var scroll_h = $(window).scrollTop(); bgstr = '<div id="ImgZoomInBG" style="position: absolute;filter:Alpha(Opacity=70); opacity:0.7;z-index: 10000;background-color: #000;display: none;"></div>'; imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src')+'" style="cursor:pointer; display:none; position:absolute; z-index:10001;" />'; if ($('#ImgZoomInBG').length < 1) { $('body').append(bgstr); } if ($('#ImgZoomInImage').length < 1) { $('body').append(imgstr); } else { $('#ImgZoomInImage').attr('src', $(this).attr('src')); } $('#ImgZoomInBG').css('top', scroll_h+'px'); $('#ImgZoomInBG').css('width', '100%'); $('#ImgZoomInBG').css('height', window_h+'px'); $('#ImgZoomInImage').css('width', '100%'); $('#ImgZoomInImage').css('height', (window_h/2)+'px');
            $('#ImgZoomInImage').css('top', (scroll_h+window_h/4)+'px');
 $('#ImgZoomInBG').show(); $('#ImgZoomInImage').show(); }; // PC端
        $(document).ready(function () { $(document).on('click','.item_img',function (){ $(this).ImgZoomIn(); $(document.body).css({ "overflow-x":"hidden", "overflow-y":"hidden" }); }); $(document).on('click','#ImgZoomInImage',function(){ $('#ImgZoomInImage').hide(); $('#ImgZoomInBG').hide(); $(document.body).css({ "overflow-x":"auto", "overflow-y":"auto" }); }); }); // 手機端
        $(document).ready(function () { $(document).on('touchend','.item_img',function (t){ $(this).ImgZoomIn(); document.ontouchstart=function(){ return false; } t.preventDefault(); }); $(document).on('touchend','#ImgZoomInImage',function(t){ $('#ImgZoomInImage').hide(); $('#ImgZoomInBG').hide(); document.ontouchstart=function(){ return true; } t.preventDefault(); }); }); </script>

三、最終效果

手機端效果如下：