jQuery实现图片预览（功能包括：ajax请求数据、弹出关闭蒙层、轮播、点击放大缩小、鼠标滚动放大缩小、键盘上下键放大缩小、旋转、拖拽），新手注意图标、bootstrop和jQuery文件的引入
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>element.style {z-index: 2000;}.el-image-viewer__wrapper {position: fixed;top: 0;right: 0;bottom: 0;left: 0;}.el-image-viewer__mask {position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: .5;background: #000;}.el-image-viewer__close {top: 40px;right: 40px;width: 40px;height: 40px;font-size: 40px;}.el-image-viewer__btn {position: absolute;z-index: 1;display: flex;align-items: center;justify-content: center;border-radius: 50%;opacity: .8;cursor: pointer;box-sizing: border-box;user-select: none;}.el-image-viewer__next, .el-image-viewer__prev {top: 50%;transform: translateY(-50%);width: 44px;height: 44px;font-size: 24px;color: #fff;background-color: #606266;border-color: #fff;}.el-image-viewer__prev {left: 40px;}.el-image-viewer__btn {position: absolute;z-index: 1;display: flex;align-items: center;justify-content: center;border-radius: 50%;opacity: .8;cursor: pointer;box-sizing: border-box;user-select: none;}.el-image-viewer__next {right: 40px;text-indent: 2px;}.el-image-viewer__next, .el-image-viewer__prev {top: 50%;transform: translateY(-50%);width: 44px;height: 44px;font-size: 24px;color: #fff;background-color: #606266;border-color: #fff;}.el-image-viewer__btn {position: absolute;z-index: 1;display: flex;align-items: center;justify-content: center;border-radius: 50%;opacity: .8;cursor: pointer;box-sizing: border-box;user-select: none;}.el-image-viewer__actions {left: 50%;bottom: 30px;transform: translateX(-50%);width: 282px;height: 44px;padding: 0 23px;background-color: #606266;border-color: #fff;border-radius: 22px;}.el-image-viewer__btn {position: absolute;z-index: 1;display: flex;align-items: center;justify-content: center;/*border-radius: 50%;*/opacity: .8;cursor: pointer;box-sizing: border-box;user-select: none;}.el-image-viewer__canvas {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}element.style {transform: scale(0.565) rotate(0deg);margin-left: 19px;margin-top: -10px;max-height: 100%;max-width: 100%;}body, html {margin: 0;padding: 0;height: 100%;font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight: 400;-webkit-font-smoothing: antialiased;-webkit-tap-highlight-color: transparent;}.el-image-viewer__wrapper{display: none;}.el-image-viewer__actions__inner {width: 100%;height: 100%;text-align: justify;cursor: default;font-size: 23px;color: #fff;display: flex;align-items: center;justify-content: space-around;}.icon_close .icon-error{font-size: 30px;}.el-image-viewer__actions__inner .iconfont{font-size: 23px;cursor: pointer;}.imags{text-align: center;}.imags img{margin:15px;}</style><script src="js/jq3.js"></script><link rel="stylesheet" href="bootstrap@3.3.4/css/bootstrap.min.css" /><script src="bootstrap@3.3.4/js/bootstrap.min.js"></script><link rel="stylesheet" href="/t/font_2096509_i9xryvfibh9.css"/></head><body><div class="imags"> </div><div tabindex="-1" class="el-image-viewer__wrapper" style="z-index: 2000;"><div class="el-image-viewer__mask"></div><span class="el-image-viewer__btn el-image-viewer__close icon_close"><i class="iconfont icon-error"></i></span><span class="el-image-viewer__btn el-image-viewer__prev icon_arrow_left"><i class="iconfont icon-arrow-left-bold"></i></span><span class="el-image-viewer__btn el-image-viewer__next icon_arrow_right"><i class="iconfont icon-arrow-right-bold"></i></span><div class="el-image-viewer__btn el-image-viewer__actions"><div class="el-image-viewer__actions__inner"><i class="iconfont icon-zoom-in"></i><i class="iconfont icon-zoom-out"></i><!--<i class="el-image-viewer__actions__divider"></i>--><i class="iconfont icon-quanping"></i><!--<i class="el-image-viewer__actions__divider"></i>--><i class="iconfont icon-xuanzhuan "></i><i class="iconfont icon-xuanzhuan-r"></i></div></div><div class="el-image-viewer__canvas"><img src="/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg); margin-left: 19px; margin-top: -10px; max-height: 100%; max-width: 100%;"><!----></div></div><script>//用到的变量//图片数组var imgData=[]//图片下标var index=0//放大缩小倍数var changeScale=1 //旋转角度var changeRotate=0//请求图片数组（5张）function requestData(){$.ajax({ type:"GET", url:"http://120.131.14.175/index.php/index/index/getImgList", dataType:"json", async:false,success:function(data){ imgData=data.data}, error:function(jqXHR){ aler("发生错误："+ jqXHR.status); } }); }requestData()console.log(imgData)var lis=''for(var i=0;i<imgData.length;i++){lis+=`<img src=`+imgData[i]+` /> `}$('.imags').append(lis)$('.imags img').css({"width":"100px","height":"100px"})//点击图片弹出蒙层$(".imags img").on("click",function(){index=$(this).index()//console.log(index)restore_()location_()$(".el-image-viewer__canvas img").attr("src",imgData[index])$('.el-image-viewer__wrapper').css("display","block")})//点击关闭蒙层$(".icon_close").on("click",function(){$('.el-image-viewer__wrapper').css("display","none")})//轮播图//上一张图$('.icon_arrow_left').bind("click",function(){if(index==0){index=4$(".el-image-viewer__canvas img").attr("src",imgData[index])}else{$(".el-image-viewer__canvas img").attr("src",imgData[index-1])index--}restore_()location_()$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")})//下一张图$('.icon_arrow_right').click(function(){if(index==4){index=0$(".el-image-viewer__canvas img").attr("src",imgData[index])}else{$(".el-image-viewer__canvas img").attr("src",imgData[index+1])index++}restore_()location_()$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")})//缩小 transform: scale(0.8) rotate(0deg); 改变scale//点击缩小$('.icon-zoom-in').on("click",function(){if(changeScale<=0.4){changeScale=0.2}else{changeScale-=0.2}$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")})//点击放大$('.icon-zoom-out').on("click",function(){if(changeScale>5.8){changeScale=6}else{changeScale+=0.2}$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")})//滚动缩小 放大$(".el-image-viewer__wrapper").bind('mousewheel',function(){//上滑if(event.wheelDelta >= 120){changeScale = changeScale+0.015}else{//下滑changeScale = changeScale<=0.215?0.2:changeScale-0.015}$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")}) //保存当前图片的放大倍数和旋转角度$('.icon-quanping').on("click",function(){alert("当前图片的放大倍数为："+changeScale+"，当前图片的旋转角度为："+changeRotate)})//旋转transform: scale(1) rotate(-90deg)//逆时针减角度$('.icon-xuanzhuan').on("click",function(){changeRotate-=90$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")})//顺时针加角度$('.icon-xuanzhuan-r').on("click",function(){changeRotate+=90$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")})//键盘按下 放大缩小$(document).keydown(function (e) {var e=event || window.eventvar k=e.keyCode || e.whichif(k==38){changeScale = changeScale+0.015}else if(k==40){changeScale = changeScale<=0.215?0.2:changeScale-0.015}$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")return false}); //封装图片格式还原（用于轮播，弹出蒙层）function restore_(){changeScale=1 changeRotate=0}//封装位置还原（用于轮播，弹出蒙层）function location_(){$(".el-image-viewer__canvas").css({"margin-left":"0px","margin-top":"0px"})}//封装拖动var drag = function(obj) {obj.bind("mousedown", start);function start(event) {if (event.button == 0) { //判断是否点击鼠标左键 /* * clientX和clientY代表鼠标当前的横纵坐标 * offset()该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。 * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在 * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差（也就是left）值， * getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的 */console.log("clientX:"+event.clientX)gapX = event.clientX - obj.offset().left;gapY = event.clientY - obj.offset().top;//movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的 $(document).bind("mousemove", move);//此处的$(document)可以改为obj $(document).bind("mouseup", stop);}return false; //阻止默认事件或冒泡 }function move(event) {obj.css({"margin-left": (event.clientX - gapX) + "px","margin-top": (event.clientY - gapY) + "px"});return false; //阻止默认事件或冒泡 }function stop() {//解绑定，这一步很必要，前面有解释 $(document).unbind("mousemove", move);$(document).unbind("mouseup", stop);}}//拖动var objs=$(".el-image-viewer__canvas")drag(objs)</script></body></html>
