svg是一种不错的矢量图,有时候我们会使用这样的图片来作为展示图,因为它不会因为放大缩小而失真。

好了,不扯淡了,废话少说,直入主题吧。

首先确定你是要深入学习还是要简单的把遇到的小任务解决一下,以后都很少会接触,显然,大家基本都是偶尔一次是吧。

那么我将告诉你最简单的方式。

链接:http://timmywil.github.io/jquery.panzoom/demo/  相信你要的应该在这里面的demo里面。

这里注意,我们写代码,可以用轮子,但是我们应该注重底层基本原理,及其实现的大概。

那么,现在我们看下它缩放的基础是什么》》》 链接:http://www.html-js.com/article/SVGkaifayuyingyong-SVG-jibenzhishiSVG-fangdasuoxiaozhi-viewbox-chutan-1%203785

看完了,回到这里,这时候我们明白,所谓的放大缩小其实是设置svg的viewbox

看完你会觉得如此简单,但是,我们是不是该考虑一下这个viewbox到底是什么??

其实,我想这时候你如果思考的话,应该不难思考到,其实就是图片的大小控制,其实一直都是在对svg外围的div控制,这样控制图片的大小。

svg图片的缩放拖拽的更多相关文章

  1. wpf图片查看器,支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  2. 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

    在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...

  3. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  4. vue 图片拖拽和滚轮缩放

    这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...

  5. C# 图片盖章功能实现,支持拖拽-旋转-放缩-保存

    实现图片盖章功能,在图片上点击,增加“图章”小图片,可以拖拽“图章”到任意位置,也可以点击图章右下角园框,令图片跟着鼠标旋转和放缩. 操作方法:1.点击增加“图章”2.选中移动图标3.点中右下角放缩旋 ...

  6. 【Android】HorizontalScrollView内子控件横向拖拽

    前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 声明 欢迎转载,但请保留文章原始出处:)  博客园 ...

  7. json 拖拽

    1.梳理知识点 1.事件对象   e || event  2.事件对象的属性      鼠标事件对象 : 坐标属性 :  clientX  clientY  pageX  pageY   offset ...

  8. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

  9. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

随机推荐

  1. 用cookies判断用户首次登录

    要求:判断24小时内用户是否是首次登录,如果是则显示弹窗,如果不是则不再显示弹窗 (function() { //是否是新访客 function isNewVisitor() { //从cookie读 ...

  2. Memcached get 命令

    Memcached get 命令获取存储在 key(键) 中的 value(数据值) ,如果 key 不存在,则返回空. 语法: get 命令的基本语法格式如下: get key 多个 key 使用空 ...

  3. winform版本自动更新

    我们在使用软件的时候经常会遇到升级版本,这也是Winform程序的一个功能,今天就大概说下我是怎么实现的吧(代码有点不完美有小BUG,后面再说) 先说下我的思路:首先在打开程序的时候去拿到我之前在网站 ...

  4. jmeter-03 JMeter + Jenkins 集成

    一.准备JMeter 测试计划 mock_api.jmx 接口准备:http://10.1.102.75:8000/mock/api/jmeter 二.jenkins 插件准备  Performanc ...

  5. 【Python】改变对象的字符串显示

    问题 改变对象实例的打印或显示输出,让它们更具可读性. 解决方案 要改变一个实例的字符串表示,可重新定义它的 __str__() 和 __repr__() 方法.例如: class Pair: def ...

  6. vue踩坑之旅 -- computed watch

    vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...

  7. 【zzuli-1626】又是A+B吗?

    题目描述 其实这个题本来应该是那道撼烁古今的A+B签到题,但LCC小王子一看不乐意了,说:“这么经典的题怎么能让别人做,我们要留着自己做,马上把这道题给我换了.”于是把原本经典的A+B签到题改成了现在 ...

  8. 二十三、DBMS_METADATA(提供提取数据库对象的完整定义的接口)

    1.概述 作用:提供提取数据库对象的完整定义的接口.这些定义可以用XML或SQL DDL格式描述.提供两种类型接口:可编程控制的接口:用于Ad Hoc查询的简单接口. 2.包的组成 dbms_meta ...

  9. python命名空间的本质

    Python的命名空间是Python程序猿必须了解的内容,对Python命名空间的学习,将使我们在本质上掌握一些Python中的琐碎的规则. 接下来我将分四部分揭示Python命名空间的本质:一.命名 ...

  10. yii2 联系我们发送邮件报错

    为什么会报错,因为国内的邮件服务商要求发送邮件的人和设置的smtp服务器账号要相同,因为联系我们的是用户,也就是发件人是用户,而不是我们配置的邮箱,所有出错. 这里我用了个取巧的办法,发件人改为自己, ...