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

最新推荐文章于 2024-06-10 08:29:57 发布

akxj2022

最新推荐文章于 2024-06-10 08:29:57 发布

阅读量2.7k

点赞数 1

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

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

版权

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

既然是自己动手，虽然功能比不上大神的，不过兼容性调到了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'

最低0.47元/天解锁文章

akxj2022

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
实现点击图片查看大图，可滚轮放大缩小，可拖动图片，兼容ie8及以上，ie7开始就有问题，以后拿出去用的时候再完善吧

前端小小白一枚，一直羡慕前端大神分分钟写出来一个模态层图片预览，这两天项目不吃紧，自己动手试做一个既然是自己动手，虽然功能比不上大神的，不过兼容性调到了ie8，还是小有成就的，现分享出来给其他小白参考，路过的大神有更牛掰的代码，欢迎评论分享工具：hbuilder遇到的兼容性问题：ie8不支持 addEventLisenter，要判断，改用 attachEvent ie8不支持通过...
复制链接

扫一扫

专栏目录