用JS实现和google地图一样的图片查看器-----图片放大、缩小、移动和还原，都控制在一个div层里，兼容ie7,FF

多菜鸟

于 2009-04-10 12:51:00 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS JAVASCRIPT 文章标签： google div ie function border class

本文链接：https://blog.youkuaiyun.com/kingerq/article/details/4062010

这个示例展示了如何使用JavaScript实现一个类似Google地图的图片查看器，允许图片放大、缩小、移动和还原，并且兼容IE7和Firefox。图片查看器的所有操作都在一个div层中完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<title>用JS实现和google地图一样的图片查看器-----图片放大、缩小、移动和还原，都控制在一个div层里，兼容ie7,FF</title>
<style type="text/css">
.boldhead{ font-weight:bold; font-size: 24px; text-align:center; padding:20px}
.pichead{overflow:auto; height:100px; width:96%; font-size:14px; font-weight:bold; margin:auto auto auto auto; border:2px solid #0066CC; background:#FFFFFF; padding-top:10px; padding-bottom:10px;}
.pichead li{float:left;margin:5px;width:400px;}
.picview { width:96%; margin:auto auto auto auto; text-align:center; border-bottom: solid 2px #0066CC; border-left:solid 2px #0066CC; border-right:solid 2px #0066CC; background:#FFFFFF; height:500px; overflow:hidden; }
.picview img{width:700px; cursor: move; margin:15px; z-index:1; border:8px soli

最低0.47元/天解锁文章