ifame嵌入图片实现滚轮放大缩小，拖动，模拟地图，漂浮移动，动态创建人员图片

最新推荐文章于 2025-11-02 16:23:19 发布

原创最新推荐文章于 2025-11-02 16:23:19 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

博客介绍了如何在iframe中实现图片的滚轮放大缩小、拖动以及模拟地图的漂浮移动功能。目前只兼容谷歌浏览器，作者期待能有大神提供其他浏览器的兼容性解决方案。

这是我最近遇到的一些问题，经过各种搜索整合最终实现了这个小功能，不过只是兼容谷歌浏览器，其他浏览器的兼容性暂时还未解决，还请某位大神看后可以帮助我进一步完善一下，多谢。

首先一个index页面引入iframe页面

<!DOCTYPE html>
<html>
<head>
	<title>ifame嵌入图片实现滚轮放大缩小，拖动，模拟地图，小人漂浮移动，动态创建人员图片</title>
</head>
<body>
<div id="drawing" style="margin-left: auto;margin-right: auto;width: 50%;height: 65%;border-bottom:1px solid #60ACFF;position: relative;overflow: hidden;background-color: white;">
<iframe name="bigpic" id="bigpic" frameborder="0" src="iframe.html" style="margin:0 auto;padding:0;" width="100%" height="700" scrolling="no">
</iframe>
</div>
</body>
</html>

然后正式编写页面内容代码如下

代码中图片还请各位引用者自行切换

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>图片实现滚轮放大缩小，拖动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style type="text/css">
        body {
            font-size: 12px;
            font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
        }

        #block1 {
            position: absolute;
        }

        #divImg {
            width: 99%;
            height: 99%;
            background: white;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="divImg">
        <div  id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;;
  left: 0px;  position: absolute; top: 0px; " onMouseOut="" drag="0">
            <div id='lm_test' style="zoom: 1.5;z-index: 100000">
                <img id="datu" src="images/bigpic.png" border="0" name="images1">
      
             
                <div id="jizhan1" class="kakou1" 
        style="position:absolute;top:20%;left:20%;z-index: 999;width:15%;height: 20%;">
                    <img src="images/center.gif" 
          style="position:absolute;width: 12%;height: 10%;top:45%;left: 45%;">
                </div>
        <div id="jizhan2"  
        style="position:absolute;top:50%;left:50%;z-index: 999;width:15%;height: 20%;">
                    <img src="images/center.gif" 
          style="position:absolute;width: 12%;height: 10%;top:45%;left: 45%;">
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        drag = 0
        move = 0

        var ie = document.all;
        var nn6 = document.getElementById && !document.all;
        var isdrag = false;
        var y, x;
        var oDragObj;

        var oDiv = document.getElementById('block1');
        var oDiv2 = document.getElementById('divImg');

        var disX = 0;
        var disY = 0;

        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;


            disX = oEvent.clientX - oDiv.offsetLeft;
            disY = oEvent.clientY - oDiv.offsetTop;

            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;

                if (l > 0) {
                    l = 0;
                } else if (l < oDiv2.offsetWidth - oDiv.offsetWidth) {
                    l = oDiv2.offsetWidth - oDiv.offsetWidth;
                }

                if (t > 0) {
                    t = 0;
                } else if (t < oDiv2.offsetHeight - oDiv.offsetHeight) {
                    t = oDiv2.offsetHeight - oDiv.offsetHeight;
                }

                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };

            return false;
        };
        //滚轮缩放
        document.getElementById("lm_test").style.height="100%";
 document.getElementById("lm_test").style.width="100%";
 document.getElementById("lm_test").onmousewheel=function(){
   document.getElementById("lm_test").style.height="";
     document.getElementById("lm_test").style.width="";
            return onWheelZoom(this);
        }

        function onWheelZoom(obj) {
            document.getElementById("datu").style.width="";
            zoom = parseFloat(obj.style.zoom);
            tZoom = zoom + (event.wheelDelta > 0 ? 0.05 : -0.05);
            if (tZoom <0.5) return true;
            obj.style.zoom = tZoom;
            return false;
        }

        //动态创建img
    //var msg = {Ynum:1,Bnum:100};
    var jizhans=[{id:1,num:{Ynum:11,Bnum:11}},{id:2,num:{Ynum:11,Bnum:11}}];
    for (x in jizhans){
    showPeople(jizhans[x]);

    }
        //window.onload = showPeople(msg);
    
    function showPeople(msg) {
      var divId= 'jizhan' + msg.id;
            var oDiv = document.getElementById(divId);
            var Ynum = msg.num.Ynum;
            var Bnum = msg.num.Bnum;
            for (var i = 0; i < Ynum; i++) {
                var Img = document.createElement("img");
                Img.src = "images/yellow.png";
                Img.style.cssText = "position:absolute;width: 8%;height: 8%;"
                Img.className = "person"+ msg.id;
                oDiv.appendChild(Img);
            };
            for (var i = 0; i < Bnum; i++) {
                var Img = document.createElement("img");
                Img.src = "images/blue.png";
                Img.style.cssText = "position:absolute;width:8%;height: 8%;"
                Img.className = "person"+ msg.id;
                oDiv.appendChild(Img);
            };


            //实现小人图标移动
            function float(obj) {
                console.log(obj)
                var x = parseInt((obj.style.left || "").replace(/[^\d]/g, "")) || 100,
                    y = parseInt((obj.style.top || "").replace(/[^\d]/g, "")) || 100;
                var xin = true,
                    yin = true
                var step = 1;
                var delay = 30;
                var oDiv = document.getElementById(divId);

                function floatAD() {
                    var L = 0
                    var T = 0
                    var R = oDiv.offsetWidth - obj.offsetWidth
                    var B = oDiv.offsetHeight - obj.offsetHeight
                    obj.style.left = (x + oDiv.scrollLeft) + "px"
                    obj.style.top = (y + oDiv.scrollTop) + "px"
                    x = x + step * (xin ? 1 : -1)
                    if (x < L) {
                        xin = true;
                        x = L
                    }
                    if (x > R) {
                        xin = false;
                        x = R
                    }
                    y = y + step * (yin ? 1 : -1)
                    if (y < T) {
                        yin = true;
                        y = T
                    }
                    if (y > B) {
                        yin = false;
                        y = B
                    }
                }
                var itl = setInterval(floatAD, delay)
                obj.onmouseover = function() {
                    clearInterval(itl)
                }
                obj.onmouseout = function() {
                    itl = setInterval(floatAD, delay)
                }
            }
            var a = document.querySelectorAll('.person'+ msg.id);
            for (var i = 0; i < a.length; i++) {
                a[i].style.left = parseInt(Math.random() * 100 * (i + 1)) + "px";
                a[i].style.top = parseInt(Math.random() * 100 * (i + 1)) + "px";
                float(a[i])
            }
        }
    </script>
</body>

</html>

前端新人代码比较乱，还请各位见谅