美文网首页Web 前端开发
HTML5对图片进行拖拽缩放打点

HTML5对图片进行拖拽缩放打点

作者: 跹尘 | 来源:发表于2019-04-19 19:06 被阅读0次

需求背景:
物联网项目,需要在地图上展示设备的位置,能够对地图进行拖拽,缩放,点击设备能够展示出设备的信息。
本代码实现了图片的缩放,拖拽,点击图片显示鼠标指针所处位置的坐标(相对于图片)。

<!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>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style>
            .dragAble {
                position: relative;
                cursor: move;
            }

    
        </style>
        <script language="javascript">
            //放大缩小
            window.onload = function() {
                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";
                });
            }
            <!--
            //拖拽
            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>
        
            <img id="monitor_map" src="bg.jpg" class="dragAble" style="margin:0;padding: 0" onclick="mapOnClick(event)" />
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        function mapOnClick(e) {
            e = e || window.event;
            var imgId = '#' + $(e.target).attr('id');
            var currentWidth = $(imgId).width();
            var currentHeight = $(imgId).height();
            var offsetX = e.pageX - $(imgId).offset().left;
            var offsetY = e.pageY - $(imgId).offset().top;
            var x = offsetX / currentWidth;
            var y = offsetY / currentHeight;
            alert(x + ':' + y)
        }
    </script>

</html>

相关文章

网友评论

    本文标题:HTML5对图片进行拖拽缩放打点

    本文链接:https://www.haomeiwen.com/subject/gzbcgqtx.html