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

最新推荐文章于 2024-04-15 15:25:05 发布

github_38998076

最新推荐文章于 2024-04-15 15:25:05 发布

阅读量998

点赞数 1

本文链接：https://blog.csdn.net/github_38998076/article/details/75570095

版权

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

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

最低0.47元/天解锁文章

github_38998076

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ifame嵌入图片实现滚轮放大缩小，拖动，模拟地图，漂浮移动，动态创建人员图片

这是我们目前项目中遇到的一些问题，经过各种搜索整合最终实现了这个小功能，不过只是兼容谷歌浏览器，其他浏览器的兼容性暂时还未解决，还请某位大神看后可以帮助我进一步完善一下，多谢。首先一个index页面引入iframe页面 Iframe版demo然后正式编写页面内容代码如下代码中图片还请各位引用者自行切换模拟地图效果
复制链接

扫一扫