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

来源：互联网发布：zero shot tensorflow 编辑：程序博客网时间：2024/05/22 00:35

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

首先一个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>

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

阅读全文

1 0