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

最新推荐文章于 2023-01-08 15:03:49 发布

akxj2022

最新推荐文章于 2023-01-08 15:03:49 发布

阅读量2.7k

点赞数 1

分类专栏： html+js+css 文章标签： html css 模态点击看大图支持ie8

本文链接：https://blog.csdn.net/akxj2022/article/details/88688575

版权

本文是一位前端新手分享的实现点击图片查看大图的模态层预览功能，该功能兼容到IE8浏览器。作者在实现过程中遇到了IE8的兼容性问题，如不支持addEventListener和getElementsByClassName等，通过适配解决。代码已提供，适合初学者参考，同时也欢迎经验丰富的开发者分享更优解决方案。

摘要由CSDN通过智能技术生成

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

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

工具：hbuilder

遇到的兼容性问题：

ie8不支持 addEventLisenter，要判断，改用 attachEvent
ie8不支持通过class名字找标签，即不支持 getElementsByClassName 方法，要判断一下，改用遍历标签的方法，看标签是否有同名 class
ie8不支持阻止冒泡的 event.preventDefault() 方法，判断 document.all （好像ie10以上就没这个all了），改用 window.event.returnValue = false;
不要用 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'