jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件。

Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加速。它能够支持不论什么元素的平移和缩放：图片、视频、iframe、canvas或文本等等。

Panzoom支持移动Mobile的触摸姿势，也支持使用手指来缩放元素大小。它全然能够同一时候在桌面设备和移动手机上同一时候使用。它能够支持iOS 和Android设备，同一时候支持Pointer（IE11+）、touch和mouse事件。

Panzoom能够在支持SVG的浏览器中直接对SVG元素进行平移和缩放。IE8及下面的浏览器不支持这个插件。

在线演示：http://www.htmleaf.com/Demo/201503311604.html

下载地址：http://www.htmleaf.com/jQuery/Image-Effects/201503311603.html

jQuery支持移动Mobile的DOM元素移动和缩放插件的更多相关文章

  1. div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  2. jquery学习笔记(二)：DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  3. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  4. jQuery中prevAll得到的DOM元素顺序问题

    学习笔记,记录下学习中遇到的问题. 使用jQuery中的prevAll可以查找当前元素之前所有的同辈元素,但是却存在一个问题:得到的同辈元素的为正常顺序的反方向. 举个例子: <!doctype ...

  5. jQuery基础之（四）jQuery创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

  6. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  7. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  8. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  9. jQuery -&gt; 怎样【先创建、再改动、后加入】 DOM元素

    怎样一气呵成地.on the fly地操作DOM元素呢? 比如顺序运行[创建]-> [改动]-> [加入]三个动作. 因为jQuery支持链式操作,事实上就是设计模式的builder模式, ...

随机推荐

  1. 一个简陋的 CSS 样式

    有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣.由于本人对前端不太精通,但为了满足网友们的需求,只好献丑了. 以下这个简陋的 CSS 样式: ? 1 2 3 4 5 ...

  2. POJ 3254 炮兵阵地(状态压缩DP)

    题意:由方格组成的矩阵,每个方格可以放大炮用P表示,不可以放大炮用H表示,求放最多的大炮,大炮与大炮间不会互相攻击.大炮的攻击范围为两个方格. 分析:这次当前行的状态不仅和上一行有关,还和上上行有关, ...

  3. SQLLoader5（从多个数据文件导入到同一张表）

    从多个数据文件导入到同一张表很简单,只需要在INFILE参数指定多个数据文件的路径即可.数据文件1:test1.txt1111 ALLE SALESMAN2222 WARD SALESMAN数据文件2 ...

  4. 学习笔记DAY2

    Pycharm使用 1.添加模板 file => settings =>Editor=>file and code template => python script => ...

  5. .NET中反射机制的使用与分析

    .NET中反射机制的使用与分析 [日期:2008-06-30] 来源:  作者:志伟     .NET反射的定义:审查元数据并收集关于它的类型信息的能力. 元数据是一种二进制信息,用以对存储在公共语言 ...

  6. css-布局1-基本属性

    <!DOCTYPE html>CSS4-布局1-基本属性 属性:displayvisibilityfloatclear HTML元素类型:行内元素,块级元素 块级元素:最大的区别:换行行内 ...

  7. struts2面试题

    由于找了很久的工作都没有找的,只能四处收集那个面试题的.和看面试题的 还有那个记忆力也不是很好了的,而那些公司面试的时候总会有一个面试题的!   在这里分享给大家(那个本来是想上传文件的,但是找不到的 ...

  8. Global.asax使用1

    Application_start: 1.第一个访问网站的用户会触发该方法.(针对访问的是asp.net应用程序的类,及ashx,aspx等才会触发) 2. 通常会在该方法里定义一些系统变量,如聊天室 ...

  9. iOS 关于tableView中有多个textField，输入框被遮住的解决方法

    这里采用tableView整体上移的方法. 代码:(其中 60 为 单元格的高度) //点击输入框触发 - (void)textFieldDidBeginEditing:(UITextField *) ...

  10. calc()函数的使用

    calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc ...