实现点击图片查看大图，可滚轮放大缩小，可拖动图片，兼容ie8及以上，ie7开始就有问题，以后拿出去用的时候再完善吧
前端小小白一枚，一直羡慕前端大神分分钟写出来一个模态层图片预览，这两天项目不吃紧，自己动手试做一个
既然是自己动手，虽然功能比不上大神的，不过兼容性调到了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',
'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;
}效果图预览：
如有疑问或建议，欢迎留言