图片放大查看上一张下一张功能实现方法

微wx笑 2020-08-06【网页网站】631 8 0关键字：图片查看器 JQuery

最近在做一个网页上放大查看图片的功能，网上找到强大的jQuery图片查看器插件Viewer.js，但不是自己想要的样子，所以自己实现了一个。

最近在做一个网页上放大查看图片的功能，网上找到强大的jQuery图片查看器插件Viewer.js，但不是自己想要的样子，所以自己实现了一个。2kw无知

2kw无知

效果如下：2kw无知

2kw无知

去这里体验：http://www.yuanfangmingliu.cn/product/huxing_xflw.html2kw无知

html代码：
2kw无知

<div id="div_mark" style="display:none; position: absolute; width:100%; height:1000px; top:0; left:0; background:rgba(0,0,0,0.7); z-index: 99999;">
    <div style="width:1200px;height:848px; margin:auto auto;">
        <div style="float:right; width:48px; height:48px; padding-right: 20px;"><img id="img_close" src="/resource/close.png" style="cursor:pointer; border: 1px dashed #888;"></div>
        <div style="width:100%; clear:both;">
            <div style="width:60px;height:800px;float:left;">
                <img id="img_prev" src="/resource/prev.png" style="cursor:pointer; position: relative; top: 49%; border: 1px dashed #888;">
            </div>
            <div style="width:1074px;height:100%;float:left;">
                <img id="img_ctnr" src="" style="width:100%;">
            </div>
            <div style="width:60px;height:800px;float:right; text-align:right;">
                <img id="img_next" src="/resource/next.png" style="cursor:pointer; position: relative; top: 49%; border: 1px dashed #888;">
            </div>
        </div>
    </div>
</div>

js代码：
2kw无知

100

101

102

103

104

105

106

107

<script>
var canScroll = true; //指示当前是否可以滚动页面，当显示放大图片时值为false，否则为true
document.body.addEventListener('touchmove', function(e){
        e.preventDefault();
    }, { passive: false });  //passive 参数不能省略，用来兼容ios和android
//添加事件
var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn, capture) { document.addEventListener(type, fn, capture); };
    } else {
        return function (el, type, fn, capture) { document.attachEvent('on' + type, function () { return fn.call(el, window.event); }, capture); }
    }
})();
//添加鼠标滚动轮事件
function addEventWheel(obj, fn ,useCapture){
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel";//FF doesn't recognize mousewheel as of FF3.x
    addEvent(obj, mousewheelevt, handler, useCapture);
     
    //初始化处理回调函数
    function handler(event) {
        if (canScroll){
            return;
        }
        var delta = 0;
        var event = window.event ||event ;
        var delta = event.detail ?-event.detail/3 : event.wheelDelta/120;
        if(event.preventDefault){ 
                event.preventDefault(); 
                event.returnValue = false; 
            }else{ 
                event.returnValue = false;
            }
            //禁止默认事件
            return fn.apply(obj, [event, delta]);//event事件对象 delta 滚动值
    }
}
 
//添加鼠标滚动轮事件 随着滚动而改变值
addEventWheel(
    $(document),
    function(e,delta){ 
        $("he").innerHTML = parseInt($("he").innerHTML) + delta;
    }, 
    { passive: false }
);
//显示放大图片
function showimg(imgurl){
    canScroll = false;
    var mk = $("#div_mark");
    mk.height(document.body.clientHeight);
    mk.css("top", $(document).scrollTop());
    var img = $("#img_ctnr");
    img.attr("src", imgurl);
    mk.show();
    console.log(imgurl);
}
 
function prevNext(pn, crnt){ //实现上一张下一张图片切换功能，pn取值范围{-1,1}，-1代表上一张，1代表下一张；crnt没有用到
    var photos = $("img.photo");
    var index = 0;
    //获取当前放大图片的索引
    photos.each(function(idx, ele){
        if (currentImgUrl == ele.getAttribute("src")){
            index = idx + pn;
        }
    });
    if (index < 0){
        index  = photos.length - 1;
    }
    if (index >= photos.length){
        index = 0;
    }
    var img = $("#img_ctnr");
    currentImgUrl = photos[index].getAttribute("src");
    img.attr("src", currentImgUrl);
    window.event? window.event.cancelBubble = true : e.stopPropagation();
}
var currentImgUrl = null; //记录当前放大图片的url
$(document).ready(function(){ //绑定事件处理程序
    $("img.photo").each(function(idx, ele){
        $(this).click({imgurl:$(this).attr("src")}, function(evt){
            currentImgUrl = evt.data.imgurl
            showimg(evt.data.imgurl);
        });
    });
    $("#img_close").click(function(){
        canScroll = true;
        var mk = $("#div_mark");
        mk.hide();
    });
    $("#div_mark").click(function(){
        canScroll = true;
        var mk = $("#div_mark");
        mk.hide();
    });
    $("#img_prev").click(function(evt){
        prevNext(-1, evt);
    });
    $("#img_next").click(function(evt){
        prevNext(1, evt);
    });
    $("#img_ctnr").click(function(evt){
        //禁止事件冒泡向上传递
        window.event? window.event.cancelBubble = true : e.stopPropagation();
    });
});
</script>