图片单击放大，滚轮控制大小，拖动，在单击变回原来的样子

最新推荐文章于 2020-03-13 09:08:12 发布

一剑风霜

最新推荐文章于 2020-03-13 09:08:12 发布

阅读量345

点赞数

本文链接：https://blog.csdn.net/qq_43238458/article/details/103677482

版权

引入自己的js即可运行只在IE上可以

	<%--<%@ page language="java" import="java.util.*,com.jjkj.model.Operator" pageEncoding="utf-8"%>--%>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	</head>
	<%--<script--%>
	<%--        src="https://code.jquery.com/jquery-3.3.1.min.js"--%>
	<%--        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="--%>
	<%--        crossorigin="anonymous">--%>
	<%--</script>--%>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<body>
	    <div>
	        <div>
	            <fieldset id="fd1" style="width:1000px;height:500px">
	                <legend>
	                    <th class="right width40">图片放大，拖动test</th>
	                </legend>
	                <table >
	                    <tr>
	                        <td  align="center">徐璐</td>
	                    </tr>
	                    <tr>
	                        <td  align="center">
	                            <img id="xl" src="images/test.jpg" class="pimg" />
	                        </td>
	                    </tr>
	                </table>
	            </fieldset>
	        </div>
	        <div id="outerdiv" style="text-align: center;position:fixed;top:1px;left:1px;background:rgba(0,0,0,0.7);z-index:9999;width:100%;height:100%;display:none;">
	            <div id="innerdiv"  style="position:absolute;"  >
	                <img id="bigimg" style="border:5px solid #fff;margin: 0 auto " src=""  onmousewheel="bigimg(this)" />
	                <div id="scale"></div>
	            </div>
	        </div>
	    </div>
	    <script type="text/javascript">
	    $(function(){
	        $(".pimg").click(function(){
	            var _this = $(this);//将当前的pimg元素作为_this传入函数
	            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
	        });
	    });
	
	    function imgShow(outerdiv, innerdiv, bigimg, _this){
	        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
	        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
	
	        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
	        $("<img/>").attr("src", src).load(function(){
	            var windowW = $(window).width();//获取当前窗口宽度
	            var windowH = $(window).height();//获取当前窗口高度
	            var realWidth = this.width;//获取图片真实宽度
	            var realHeight = this.height;//获取图片真实高度
	            var imgWidth, imgHeight;
	            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
	
	            if(realHeight>windowH*scale) {//判断图片高度
	                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
	                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
	                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
	                    imgWidth = windowW*scale;//再对宽度进行缩放
	                }
	            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
	                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
	                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
	            } else {//如果图片真实高度和宽度都符合要求，高宽不变
	                imgWidth = realWidth;
	                imgHeight = realHeight;
	            }
	            $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
	
	            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
	            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
	            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
	            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
	        });
	
	        $(outerdiv).click(function(){//再次点击淡出消失弹出层
	            $(this).fadeOut("fast");
	        });
	    }
	
	    function bigimg(obj) {
	        //obj是一个对象，初始时obj并没有zoom属性，所以给zoom赋值为100；
	        var zoom = parseInt(obj.style.zoom) || 100;
	        //每次滚动鼠标时，改变zoom的大小
	        //event.wheelDelta有两个值，120，-120，取值情况取决于滚动鼠标的方向；
	        zoom += event.wheelDelta / 12;//每次滚动加减10；
	        if (zoom > 0) {
	            obj.style.zoom = zoom + "%";//更改后的zoom赋值给obj
	            console.log(obj.style.zoom);
	        }
	        return false;
	    }
	
	
	
	
	    // box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标
	    var box = document.getElementById("innerdiv");
	    var fa = document.getElementById('outerdiv');
	    // var scale = document.getElementById("scale");
	    // 图片移动效果
	    box.onmousedown=function(ev) {
	        var oEvent = ev;
	        // 浏览器有一些图片的默认事件,这里要阻止
	        oEvent.preventDefault();
	        var disX = oEvent.clientX - box.offsetLeft;
	        var disY = oEvent.clientY - box.offsetTop;
	        fa.onmousemove=function (ev) {
	            oEvent = ev;
	            oEvent.preventDefault();
	            var x = oEvent.clientX -disX;
	            var y = oEvent.clientY -disY;
	
	            // 图形移动的边界判断
	            x = x <= 0 ? 0 : x;
	            x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
	            y = y <= 0 ? 0 : y;
	            y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
	            box.style.left = x + 'px';
	            box.style.top = y + 'px';
	        }
	        // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
	        // fa.onmouseleave = function () {
	        // 	fa.onmousemove=null;
	        // 	fa.onmouseup=null;
	        // }
	        // // 鼠标弹起后停止移动
	        // fa.onmouseup=function() {
	        // 	fa.onmousemove=null;
	        // 	fa.onmouseup=null;
	        // }
	    }
	</script>
	</body>
	</html>

一剑风霜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片单击放大，滚轮控制大小，拖动，在单击变回原来的样子

引入自己的js即可运行 <%--<%@ page language="java" import="java.util.*,com.jjkj.model.Operator" pageEncoding="utf-8"%>--%> <html lang="en"> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫