如何在固定的DIV中放大缩小图片（js实现）？

hewei0212 2009-04-02 01:44:43

想向大家请教一个问题，就是如何在固定大小的DIV中放大缩小图片。我用js做了一个有关图片放大缩小，但当图片放大到超过DIV的大小时，DIV也会随着扩大。使得整个页面的效果很乱。所以，用js如何做，才可以实现图片只在固定大小的DIV中放大缩小。有点类似百度地图，但没有那么复杂，就是放大缩小一张图片而已。谢谢大家！请高手指点。

...全文

904 7 打赏收藏转发到动态举报

写回复

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

jianweiead 2010-08-12

打赏
举报

回复

我也很像知道为什么呵呵

mianhuatang_li 2010-02-06

打赏
举报

回复

看看解决方案是什么

zhanglhai 2010-01-05

打赏
举报

回复

怎么解决的。发出来参考下。我也需要这个。、谢谢啊

cntmi 2009-04-02

打赏
举报

回复

怎么解决地？能不能代码贴下，非常感谢……

hewei0212 2009-04-02

打赏
举报

回复

问题已解决

hewei0212 2009-04-02

打赏
举报

回复

如果放大的图片宽高超过了DIV的宽高怎么办呢？截掉不显示？那样不行的，务必要显示整张图片最好可以用鼠标拖动图片，效果和baidu地图差不多。

cntmi 2009-04-02

打赏
举报

回复

你首先把DIV的宽高固定住，然后在放大的时候去比较图片的宽高与DIV的宽高，这样不行吗

js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开查看

一个很好用的javaScript写的小程序，可实现div的拖动、变形。解压后直接拷到程序中就可运行

本课程是一门具有很强实践性质的“项目实战”课程，即“企业中台系统实战”，其中主要包含三大块核心内容，如下图所示(右键可以在新标签页中打开图片放大查看)：即主要包含以下三大块内容： ① 企业内部应用系统菜单资源和操作权限的统一管理； ② 分布式应用系统通信时的统一授权，即基于AccessToken的授权与认证； ③ 分布式服务/系统通信时的两大方式（基于dubbo rpc协议和基于http协议的restful api实战）。值得一提的是，这套中台系统由于讲解了如何统一管理企业内部各大应用系统的“菜单资源列表”、“操作权限”，故而本门课程的“代码实战”是建立在之前debug录制的“企业权限管理平台”这套课程的基础之上的，故而在这里debug建议没有项目开发基础的小伙伴可以先去学习我的那套“企业权限管理平台”的实战课程，之后再来学习我的这套中台系统的实战才不会很吃力(课程链接：) 本课程的课程大纲如下图所示(右键可以在新标签页中打开图片放大查看)：除此之外，这套“中台系统”由于统一管理了企业内部各大应用系统的“菜单资源和操作权限”以及“应用系统之间通信时的统一授权”，故而难免需要涉及到“中台系统”与“中台子系统”、“中台子系统”与“中台子系统”之间的通信（即分布式服务之间的通信），在这里我们是采用“dubbo + zookeeper”的方式加以落地实现的，详情如下图所示(右键可以在新标签页中打开图片放大查看)：而众所周知，作为一款知名以及相当流行的分布式服务调度中间件,dubbo现如今已经晋升为Apache顶级的开源项目，未来也仍将成为“分布式系统”开发实战的一大利器，如下图所示为dubbo底层核心系统架构图(右键可以在新标签页中打开图片放大查看)：而在这门“中台系统实战”的课程中，我们也将始终贯彻、落地dubbo的这一核心系统架构图，即如何将中台系统开发的服务注册/发布到注册中心zookeeper，中台子系统如何订阅/消费/调度中台系统发布在zookeeper的接口服务，中台子系统在走http协议调度通信时dubbo如何进行拦截、基于token认证接口的调用者等等，这些内容我们在课程中将一一得到代码层面的实战落地！下图为本课程中涉及到的分布式系统/服务之间采用“http协议restfulapi”方式通信时的Token授权、认证的流程图(右键可以在新标签页中打开图片放大查看): 而不夸张地说，基于AccessToken的授权、认证方式在现如今微服务、分布式时代系统与系统在通信期间最为常用的“授权方式”了，可想而知，掌握其中的流程思想是多么的重要！以下为本门课程的部分截图(右键可以在新标签页中打开图片放大查看)：核心技术列表：值得一提的是，由于本门课程是一门真正介绍“中台思想”以及将“中台思想”和“分布式系统开发实战”相结合落地的课程，故而在学完本门课程之后，可以掌握到的核心技术自然是相当多的。主要由SpringBoot2.0、SpringMVC、Mybatis、Dubbo、ZooKeeper、Redis、OkHttp3、Guava-Retrying重试机制、JWT(Json Web Token)、Shiro、分布式集群session共享、Lombok、StreamAPI、Dubbo-Filter以及ServiceBean等等。如下图所示(右键可以在新标签页中打开图片放大查看)：

使用hammer.js 可以手势控制同时进行旋转拖拽放大缩小功能，解决官网移动旋转复位效果，重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)

vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用

87,921

社区成员

224,619

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章