实现点击图片查看大图，可滚轮放大缩小，可拖动图片，兼容ie8及以上，ie7开始就有问题，以后拿出去用的时候再完善吧

移动开发 2022-08-28 21:32:25 阅读次数: 0

前端小小白一枚，一直羡慕前端大神分分钟写出来一个模态层图片预览，这两天项目不吃紧，自己动手试做一个

既然是自己动手，虽然功能比不上大神的，不过兼容性调到了ie8，还是小有成就的，现分享出来给其他小白参考，路过的大神有更牛掰的代码，欢迎评论分享

工具：hbuilder

遇到的兼容性问题：

  1. ie8不支持 addEventLisenter，要判断，改用 attachEvent
  2. ie8不支持通过class名字找标签，即不支持 getElementsByClassName 方法，要判断一下，改用遍历标签的方法，看标签是否有同名 class
  3. ie8不支持阻止冒泡的 event.preventDefault() 方法，判断 document.all （好像ie10以上就没这个all了），改用 window.event.returnValue = false;
  4. 不要用 es6 的写法，ie不支持，如let

直接上代码，代码放到hbuilder相应目录就可以运行了

看看目录 只用看index的就行，项目没有用到jquery，目录里的jquery是其他测试代码用的，，book文件夹里放的图片，在index.js里有引用

从页面开始粘代码

index.html：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" type="text/css" />
		<script type="text/javascript" src="js/index.js"></script>
	</head>

	<body>
		<div id="mainDiv" class="main_div">
			<!--标题-->
			<div id="headerDiv" class="header_div">
				<span class="header_h1"> 图册</span>
			</div>
			<!--轮播框-->
			<div id="imgDiv" class="img_div">
				<!--图-->
				<img id="imgChangeBox" class="img_fit_div" src="static/book/01.jpg" 
					onclick="centerPageClick()"/>
				<div id="leftPageButton" class="left_page_button" onclick="leftPageClick()">
					<span class="page_change_button">上一页</span>
				</div>
				<div id="cneterPageButton" class="center_page_button" onclick="centerPageClick()">
					<span class="page_change_button">查看大图</span>
				</div>
				<div id="rightPageButton" class="right_page_button" onclick="rightPageClick()">
					<span class="page_change_button">下一页</span>
				</div>
			</div>

			<!--模态层-->
			<div id="imgModalWrapDiv" class="modal_wrap_div" hidden ondblclick="modalClick()"></div>
			<div id="imgModalDiv" class="img_modal_div" hidden ondblclick="modalClick()">
				<img id="imgInModal" class="img_in_modal" src="static/book/01.jpg" />
				<div id="closeImgDiv" class="close_modal_img" onclick="modalClick()">X</div>
			</div>

		</div>
	</body>

</html>
<style>

</style>

index.js：

var picData = [
	'static/book/01.jpg', 'static/book/02.jpg',
	'static/book/03.jpg', 'static/book/04.jpg',
	'static/book/05.jpg', 'static/book/03.jpg',
	'static/book/07.jpg', 'static/book/06.jpg',
	'static/book/09.jpg', 'static/book/10.jpg',
	'static/book/11.jpg', 'static/book/12.jpg',
	'static/book/13.jpg', 'static/book/14.jpg',
	'static/book/15.jpg', 'static/book/16.jpg',
	'static/book/17.jpg', 'static/book/18.jpg',
	'static/book/19.jpg', 'static/book/20.jpg',
	'static/book/21.jpg', 'static/book/22.jpg',
	'static/book/23.jpg', 'static/book/24.jpg',
	'static/book/25.jpg', 'static/book/26.jpg'
]
var nowIndex = 1; //当前第几张图
var interval; //自动轮播标志
var tipFlag = true; //是否提示

window.onload = function() //用window的onload事件，窗体加载完毕的时候
{
	addMouseGunLunListners();
	addMouseClickAndMoveListners();
}

/**
 * 添加鼠标滚轮监听事件
 */
function addMouseGunLunListners() {
	//全景图随鼠标的滚动进行缩放
	var fullImg = document.getElementById("imgInModal");
	if(fullImg.addEventListener) {
		// IE9, Chrome, Safari, Opera
		fullImg.addEventListener("mousewheel", MouseWheelHandler, false);
		// Firefox
		fullImg.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
	} else {
		fullImg.attachEvent("onmousewheel", MouseWheelHandler);
	}

	function MouseWheelHandler(e) {
		preventDefault(e);
		var e = window.event || e;
		//当前鼠标的位置
		var mousex = e.clientX;
		var mousey = e.clientY;
		//		console.log("mousex===" + mousex);
		//		console.log("mousey===" + mousey);

		//图片的宽度
		var oldwidth = fullImg.width;
		var oldheight = fullImg.height;
		//		console.log("oldwidth===" + oldwidth);
		//		console.log("oldheight===" + oldheight);

		//图片距离左侧的长度
		var imgoffsetleft = fullImg.offsetLeft;
		//		console.log("imgoffsetleft===" + imgoffsetleft);
		//图片距离上面的长度
		var imgoffsettop = fullImg.offsetTop;
		//		console.log("imgoffsettop===" + imgoffsettop);

		//鼠标距离图片左侧的长度
		var mouseImgLeft = mousex - imgoffsetleft;
		//鼠标距离图片左侧长度的占比，用这个比例计算左侧会获得/减掉多少长度
		var permouseImgleft = mouseImgLeft / oldwidth;
		//		console.log("mouseImgLeft===", mouseImgLeft)
		//		console.log("permouseImgleft===", permouseImgleft)
		//鼠标距离图片顶部的长度
		var mouseImgtop = mousey - imgoffsettop;
		var permouseImgtop = mouseImgtop / oldheight;
		//		console.log("mouseImgtop===", mouseImgtop)
		//		console.log("permouseImgtop===", permouseImgtop)

		//计算滚轮滚动后图片的新宽度
		//		console.log(e);
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
		var newwidth = Math.max(100, Math.min(4800, fullImg.width + (30 * delta)));
		//		console.log("delta==", delta)
		//		console.log("newwidth==", newwidth)
		//计算新高度
		var newheight = oldheight * (oldwidth / newwidth);
		//		console.log("newheight==", newheight)

		//计算后图片的左侧距离
		var offsetxnew = calculateImageLeft(oldwidth, newwidth, imgoffsetleft, permouseImgleft);
		var offsetynew = calculateImageTop(oldheight, newheight, imgoffsettop, permouseImgtop);
		//		console.log("offsetxnew==", offsetxnew);
		//		console.log("offsetynew==", offsetynew);

		fullImg.style.left = offsetxnew + "px";
		fullImg.style.top = offsetynew + "px";
		fullImg.style.width = newwidth + "px";
		return false;
	}

	//计算left
	function calculateImageLeft(oldwidth, newwidth, imgoffsetleft, permouseImgleft) {
		//		console.log("calculate start-------------")
		//差值
		var suboldnew = newwidth - oldwidth;
		//		console.log("差值suboldnew==",suboldnew);

		//最终改变范围获得的长度
		var subnew = suboldnew * permouseImgleft;
		//		console.log("subnew===",subnew);

		//最终长度
		var leftnew = imgoffsetleft - subnew;
		return leftnew;
	}
	//计算top
	function calculateImageTop(oldheight, newheight, imgoffsettop, permouseImgtop) {
		//		console.log("calculate start-------------")
		//差值
		var suboldnew = newheight - oldheight;
		//		console.log("差值suboldnew==", suboldnew);

		//最终改变范围获得的长度
		var subnew = suboldnew * permouseImgtop;
		//		console.log("subnew===", subnew);

		//最终长度
		var topnew = imgoffsettop + subnew;
		return topnew;
	}
}
/**
 * 添加鼠标点击和移动事件
 * 切记，top和left为00的时候，一定是左上角
 * 即，要确定父集元素是否是全屏
 */
function addMouseClickAndMoveListners() {

	//全景图随鼠标的滚动进行缩放
	var obj = document.getElementById("imgInModal");
	//	console.log(obj);
	if(obj.addEventListener != undefined) {
		obj.addEventListener("mousedown", start, false)
	} else {
		//		console.log("ie")
		obj.attachEvent("onmousedown", start);
	}
	var offsX;
	var offsY;

	function start(event) {
		preventDefault(event);
//		console.log("start-")
//		console.log(event);
//		console.log(event.button);
		// 鼠标左键
		if(event.button == 0 || event.button == 1) {
//			console.log(event)
//			console.log(obj)
			offsX = event.clientX - obj.offsetLeft;
			offsY = event.clientY - obj.offsetTop;
//			console.log(offsX + "==" + offsY)
			if(document.addEventListener) {
				document.addEventListener('mousemove', move, false);
				document.addEventListener('mouseup', stop, false);
			} else {
				document.attachEvent("onmousemove", move);
				document.attachEvent("onmouseup", stop);
			}
		}
	}

	function move(event) {
		preventDefault(event);
		obj.style.left = (event.clientX - offsX) + 'px';
		obj.style.top = (event.clientY - offsY) + 'px';;
//		console.log(obj.style.left + "+++" + obj.style.top)
	}

	function stop(envet) {
		preventDefault(event);
		if(document.removeEventListener) {
			document.removeEventListener('mousemove', move);
			document.removeEventListener('mouseup', stop);
		} else {
			document.detachEvent('onmousemove', move);
			document.detachEvent('onmouseup', stop);
		}
	}
}

/**
 * 检查是否点击了翻页提示
 */
function checkPageBoxTip() {
	var textFlag = getClassNames('page_change_button', 'span')[0].style.display;
	var textLen = getClassNames("page_change_button", 'span').length;
	//	var textFlag = document.getElementsByClassName("page_change_button")[0].style.display;
	//	var textLen = document.getElementsByClassName("page_change_button").length;
	if(!textFlag && textFlag != 'none') {
		for(var i = 0; i < textLen; i++) {
			getClassNames("page_change_button", 'span')[i].style.display = 'none';
			//			document.getElementsByClassName("page_change_button")[i].style.display = 'none';
		}
		tipFlag = false;
	}
}

/**
 * 点击上页
 */
function leftPageClick() {
	if(tipFlag) {
		checkPageBoxTip();
	} else {
		nowIndex--;
		if(nowIndex <= 0) {
			nowIndex++;
			alert("前面没有了")
		} else {
			document.getElementById("imgChangeBox").src = picData[nowIndex - 1]
		}
	}
}

/**
 * 点击下页 
 */
function rightPageClick() {
	if(tipFlag) {
		checkPageBoxTip();
	} else {
		nowIndex++;
		if(nowIndex > picData.length) {
			nowIndex--;
			alert("后面没有了")
		} else {
			document.getElementById("imgChangeBox").src = picData[nowIndex - 1]
		}
	}
}

/**
 * 点击中间
 */
function centerPageClick() {
	//	console.log(tipFlag)
	if(tipFlag) {
		checkPageBoxTip();
	} else {
		modalClick();
	}
}

//定时翻页
function makeInterval() {
	if(interval) {
		clearInterval(interval);
		interval = "";
	} else {
		interval = setInterval(function() {
			if(nowIndex == picData.length) {
				nowIndex = 0
			}
			rightPageClick()
		}, 1000)
	}
}

//点击模态层
function modalClick() {
	//	获取模态div
	var imgModalWrapDiv = document.getElementById("imgModalWrapDiv");

	//获取客户端的宽高
	var windowx = document.body.clientWidth
	var windowy = document.body.clientHeight;
	//	console.log("windowx==" + windowx)
	//	console.log("windowy==" + windowy)

	//获取图片所在的div
	var imgModalDiv = document.getElementById("imgModalDiv");

	//获取图片
	var imgInModal = document.getElementById("imgInModal");
	imgInModal.src = document.getElementById("imgChangeBox").src;
	//为兼容ie8，需要new一个image
	var img = new Image();
	img.src = document.getElementById("imgChangeBox").src;
	//	console.log("====",img.width)
	//	console.log("====",img.height)
	//	获取图片宽高
	var imgx = img.width;
	var imgy = img.height;
	//	console.log("imgx==" + imgx)
	//	console.log("imgy==" + imgy)
	//计算新的图片宽高
	var imgxnew = imgx;
	var imgynew = imgy;
	if(imgx > windowx) {
		imgxnew = windowx * 0.8; //屏幕的80%
		imgynew = (imgxnew / imgx) * imgy;
	}

	//获取left和top距离
	var offsetleft = windowx * 0.1;
	var offsettop = calculatetop(windowy, imgynew);
	//	console.log("offsetleft==" + offsetleft)
	//	console.log("offsettop==" + offsettop)

	imgInModal.style.width = imgxnew + 'px';
	imgInModal.style.left = offsetleft + "px";
	imgInModal.style.top = offsettop + 'px';

	//	var dialogDiv = document.getElementById("dialogDiv");
	//	console.log(imgModalWrapDiv.style.display)''
	if(imgModalWrapDiv.style.display != 'block') {
		imgModalWrapDiv.style.display = 'block';
		imgModalDiv.style.display = 'block';
		//		dialogDiv.hidden = false;
	} else {
		imgModalWrapDiv.style.display = 'none';
		imgModalDiv.style.display = 'none';
		//		dialogDiv.hidden = true;
	}
}

//计算高
function calculatetop(windowy, imgy) {
	var suby = windowy - imgy;
	//	console.log("差值suby===", suby);
	return suby / 2;
}

//弹出框点击确定
function dialogButtonOkClick() {
	modalClick();
}

/**
 * ie8 getclassname兼容判断
 * 
 */

function getClassNames(classStr, tagName) {
	if(document.getElementsByClassName) {
		return document.getElementsByClassName(classStr)
	} else {
		var nodes = document.getElementsByTagName(tagName),
			ret = [];
		for(i = 0; i < nodes.length; i++) {
			if(hasClass(nodes[i], classStr)) {
				ret.push(nodes[i])
			}
		}
		return ret;
	}
}

function hasClass(tagStr, classStr) {
	var arr = tagStr.className.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含
	for(var i = 0; i < arr.length; i++) {
		if(arr[i] == classStr) {
			return true;
		}
	}
	return false;
}

/**
 * ie8 不兼容 preventeDefault()
 */
function preventDefault(event) {
//	console.log(document.all)
	if(document.all) {
		window.event.returnValue = false;
	} else {
		event.preventDefault();
	}
}

index.css：

	body,
	html {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.clear {
		clear: all;
	}
	
	.main_div {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	/**
	 * 页面头
	 */
	
	.header_div {
		text-align: center;
		position: absolute;
		height: 40px;
		width: 100%;
	}
	
	.header_h1 {
		font-size: 30px;
	}
	/**
	 * 轮播框
	 */
	
	.left_page_button {
		float: left;
		width: 30%;
		z-index: 10;
		height: 100%;
		opacity: 1;
		position: absolute;
		top: 0;
	}
	
	.right_page_button {
		float: left;
		margin-left: 70%;
		width: 30%;
		z-index: 10;
		height: 100%;
		top: 0;
		position: absolute;
	}
	
	.center_page_button {
		float: left;
		margin-left: 30%;
		width: 40%;
		z-index: 10;
		height: 100%;
		top: 0;
		position: absolute;
	}
	
	.page_change_button {
		/*翻页上面的字(上一页...)*/
		opacity: 1;
		font-size: 40px;
		color: gray;
		opacity: 1;
		line-height: 210px;
		z-index: 10;
	}
	
	.img_div {
		border-width: 2px;
		border-color: gray;
		border-style: solid;
		text-align: center;
		height: 250px;
		width: 80%;
		margin: 40px 0px 0px 10%;
		padding: 0;
		position: absolute;
	}
	
	.img_fit_div {
		height: 100%;
		width: 100% margin: 10px 5px 10px 5px;
		padding: 0;
	}
	/**
	 * 弹出框模态 
	 * */
	
	.modal_wrap_div {
		background: gray;
		opacity: 0.4;
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 49;
	}
	
	.img_modal_div {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 50;
	}
	/*模态里的图片预览*/
	
	.img_in_modal {
		z-index: 51;
		position: absolute;
	}
	/**
	 * 关闭预览图图标
	 */
	
	.close_modal_img {
		color: #FFFFFF;
		background-color: #666666;
		float: right;
		top: 0px;
		width: 50px;
		height: 50px;
		display: inline-block;
		z-index: 60;
		font-size: 35px;
		text-align: center;
		cursor: pointer;
		position: relative;
	}
	/**
	 * 弹出框
	 */
	
	.dialog_div {
		z-index: 100;
		background: powderblue;
		border-radius: 5px;
		box-shadow: #666 0px 0px 10px;
		overflow: hidden;
		min-height: 200px;
		min-width: 300px;
		max-height: 80%;
		max-width: 80%;
		position: fixed;
		margin-top: 10%;
		margin-left: 25%;
	}
	
	.dialog_header {
		height: 25px;
		background: cadetblue;
		text-align: center;
	}
	
	.dialog_header span {
		font-size: 20px;
		line-height: 25px;
		color: lightgoldenrodyellow;
	}
	
	.dialog_content {
		font-weight: 300;
		font-size: 1.15em;
		padding: 5px 10px 5px 10px;
		margin: 0;
		text-align: center;
	}
	
	.dialog_footer {
		height: 30px;
	}
	/**
 * 按钮样式
 */
	
	.button_ok {
		background: greenyellow;
		width: 50px;
		height: 30px;
		border-radius: 10px;
		font-size: 10px;
	}

效果图预览：

如有疑问或建议，欢迎留言

猜你喜欢

转载自blog.csdn.net/akxj2022/article/details/88688575
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022