手機端 — 點擊圖片全屏查看

標籤：方法   手機   alpha   else   efault   java   驗收   play   rip   

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

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

<div class="add_photo" style="margin-top: 1000px;">        <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>

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

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

（1）我寫的預覽背景的 hieght 是100%，所以預覽時灰色的預覽背景的高度是整個頁面的，即手機端可視視窗高度+滾動高度。所以進行了修改：height 應該是可視視窗高度，並且預覽背景的 top 值應該是頁面滾動的高度值，而預覽圖片的 top 值應該是頁面滾動的高度值+可視高度的四分之一。

（2）全屏預覽應該是不能再上下滑動的，但是手機頁面中有滾動所以可以上下滑動，所以應該在點擊靶心圖表片預覽時讓滾動失效，在收回預覽後恢複滾動事件。

最終修改如下：：：

<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>

手機端效果如下：

 

 

手機端 — 點擊圖片全屏查看