juery，js实现拖动图片，滑动鼠标进行方法缩小

最新推荐文章于 2022-10-14 13:37:51 发布

dpc5517

最新推荐文章于 2022-10-14 13:37:51 发布

阅读量287

点赞数

分类专栏： html、js 文章标签： js javascript

原文链接：https://blog.csdn.net/erpenggg/article/details/77552462

版权

html、js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

juery，js实现拖动图片，滑动鼠标进行方法缩小

1、首先感谢《java大表哥》这个位博主的分享。
连接如下：
原代码的连接地址
2、由于需求的更改，在原代码的基础上进行了修改。添加了外层的div用户控制整个div的样式和内容（图片及关闭按钮等的样式）注：由于能力有限没能将div的放大缩小和图片的放大缩小抽取出来，望读者改正

 <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS-->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">

    <title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>

    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.js" type="text/javascript"></script>
    <script src="../js/ajax-1-1.js" type="text/javascript"></script>
    <style>
        .dragAble {
            position: relative;
            cursor: move;
        }

        .img-con {
            position: relative;
            width: 713px;
            height: 455px;
            overflow: hidden;
            border: 1px solid red;

        }
    </style>
    <script language="javascript">

        window.onload = function () {

            /*
           * 图片外层的div的放大和缩小
           * */
            $("#imgdiv").css({"width": "300px", "height": "280px"});

            var oDiv = document.getElementById('imgdiv');

            oDiv.onmousewheel = fn;  //给div添加鼠标滚轮事件,非火狐浏览器

            if (oDiv.addEventListener) {  //火狐浏览器添加鼠标滚轮事件
                oDiv.addEventListener('DOMMouseScroll', fn, false);
            }

            function fn(ev) {

                var ev = ev || event;  //事件的浏览器兼容性

                var b = true;  //设置鼠标向上还是向下滚动的变量

                if (ev.wheelDelta) {  //如果方法存在说明是非火狐浏览器
                    b = ev.wheelDelta > 0 ? true : false;  //如果大于0为true向上，小于0为false向下
                } else {
                    b = ev.detail < 0 ? true : false; //火狐浏览器
                }

                if (b) { //如果滚轮向上
                    this.style.width = this.offsetWidth * 1.1 + "px";
                    this.style.height = this.offsetHeight * 1.1 + "px";
                } else {
                    this.style.width = this.offsetWidth * 0.9 + "px";
                    this.style.height = this.offsetHeight * 0.9 + "px";
                }

                if (ev.preventDefault) { //取消火狐的默认事件
                    ev.preventDefault();
                }

                return false;  //取消非火狐的滚轮默认事件

            }

            /*
            * 图片的放大和缩小
            * */
            var oImg = document.getElementsByTagName("img")[0];

            function fnWheel(obj, fncc) {
                obj.onmousewheel = fn;
                if (obj.addEventListener) {
                    obj.addEventListener('DOMMouseScroll', fn, false);
                }

                function fn(ev) {
                    var oEvent = ev || window.event;
                    var down = true;

                    if (oEvent.detail) {
                        down = oEvent.detail > 0
                    } else {
                        down = oEvent.wheelDelta < 0
                    }

                    if (fncc) {
                        fncc.call(this, down, oEvent);
                    }

                    if (oEvent.preventDefault) {
                        oEvent.preventDefault();
                    }

                    return false;
                }
            }

            fnWheel(oImg, function (down, oEvent) {

                var oldWidth = this.offsetWidth;
                var oldHeight = this.offsetHeight;
                var oldLeft = this.offsetLeft;
                var oldTop = this.offsetTop;

                var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
                var scaleY = (oEvent.clientY - oldTop) / oldHeight;

                if (down) {
                    this.style.width = this.offsetWidth * 0.9 + "px";
                    this.style.height = this.offsetHeight * 0.9 + "px";
                } else {
                    this.style.width = this.offsetWidth * 1.1 + "px";
                    this.style.height = this.offsetHeight * 1.1 + "px";
                }

                var newWidth = this.offsetWidth;
                var newHeight = this.offsetHeight;

                this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
                this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
            });
        };

        /*
        * 整个div的拖动
        * */
        var ie = document.all;
        var nn6 = document.getElementByIdx && !document.all;
        var isdrag = false;
        var y, x;
        var oDragObj;

        function moveMouse(e) {
            if (isdrag) {
                oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
                oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
                return false;
            }
        }

        function initDrag(e) {
            var oDragHandle = nn6 ? e.target : event.srcElement;
            var topElement = "HTML";
            while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
                oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
            }
            if (oDragHandle.className == "dragAble") {
                isdrag = true;
                oDragObj = oDragHandle;
                nTY = parseInt(oDragObj.style.top + 0);
                y = nn6 ? e.clientY : event.clientY;
                nTX = parseInt(oDragObj.style.left + 0);
                x = nn6 ? e.clientX : event.clientX;
                document.onmousemove = moveMouse;
                return false;
            }
        }

        document.onmousedown = initDrag;
        document.onmouseup = new Function("isdrag=false");

    </script>
</head>
<body>

<div class="img-con">
    <div style="top: 110px; left: 100px;" id="imgdiv">
        <div class="dragAble">
            <div style="border: 1px solid red; ">
                <div style="">
                    <button onclick="closeImg()" type="button" class="btn btn-primary" id="imgCloseBtn">
                        关闭图片
                    </button>
                </div>

                <div>
                    <img src="../images/mboxAlert/jm-box-ico0.png"/>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
</html>

二、其次分享两个比较好的js,html里unicode与ascii转换代码的连接：
连接1
连接二

dpc5517

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
juery，js实现拖动图片，滑动鼠标进行方法缩小

**juery，js实现拖动图片，滑动鼠标进行方法缩小**1、首先感谢《java大表哥》这个位博主的分享。连接如下：原代码的连接地址<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
复制链接

扫一扫

专栏目录