图片放大查看上一张下一张功能实现方法
微wx笑
2020-08-06【网页网站】
8
0关键字：
图片查看器 JQuery
最近在做一个网页上放大查看图片的功能，网上找到强大的jQuery图片查看器插件Viewer.js，但不是自己想要的样子，所以自己实现了一个。
最近在做一个网页上放大查看图片的功能，网上找到强大的jQuery图片查看器插件Viewer.js，但不是自己想要的样子，所以自己实现了一个。
效果如下：
去这里体验：http://www.yuanfangmingliu.cn/product/huxing_xflw.html
html代码：
<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代码：
<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>功能依赖JQuery，本例使用的为 jquery-1.9.1.min.js。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2020-08-06/517.html
上一篇：div中内容上下居中小结
下一篇：js禁止页面滚动
