网页网站您现在的位置是:首页 > 博客日志 > 网页网站

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

<a href='mailto:'>微wx笑</a>的头像微wx笑2020-08-06 17:14:46网页网站人已围观关键字: 图片查看器  JQuery  

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

最近在做一个网页上放大查看图片的功能,网上找到强大的jQuery图片查看器插件Viewer.js,但不是自己想要的样子,所以自己实现了一个。Bbv编程技术_踩坑日志_进阶指南_无知人生


Bbv编程技术_踩坑日志_进阶指南_无知人生

效果如下:Bbv编程技术_踩坑日志_进阶指南_无知人生

image.pngBbv编程技术_踩坑日志_进阶指南_无知人生

去这里体验:http://www.yuanfangmingliu.cn/product/huxing_xflw.htmlBbv编程技术_踩坑日志_进阶指南_无知人生

html代码:
Bbv编程技术_踩坑日志_进阶指南_无知人生

<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代码:
Bbv编程技术_踩坑日志_进阶指南_无知人生

<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。Bbv编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()