jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

<pre>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>touch.js demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="{$yuming}/touchjs/js/touch.min.js"></script>
<script type="text/javascript" src="{$yuming}/touchjs/js/cat.touchjs.js"></script>
<script type="text/javascript" src="{$yuming}/touchjs/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
.tcpiccontainer{
width:100%;
height: 100%;
position: absolute;
left:0px;
top:0px;
z-index: 999;
background: #000;
}
.tcpiccontainer img{
width:100%;
position: absolute;
margin-top: 11rem;;
}
</style>
<div class="tcpiccontainer">
<img id="targetObj" src="http://demo.somethingwhat.com/images/flower1.jpg" />
</div>

<script type="text/javascript">
$(function () {
var $targetObj = $('#targetObj');
//初始化设置
cat.touchjs.init($targetObj, function (left, top, scale, rotate) {
$('#left').text(left);
$('#top').text(top);
$('#scale').text(scale);
$('#rotate').text(rotate);
$targetObj.css({
left: left,
top: top,
'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)',
'-webkit-transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'
});
});
//初始化拖动手势（不需要就注释掉）
cat.touchjs.drag($targetObj, function (left, top) {
$('#left').text(left);
$('#top').text(top);
});
//初始化缩放手势（不需要就注释掉）
cat.touchjs.scale($targetObj, function (scale) {
$('#scale').text(scale);
});
//初始化旋转手势（不需要就注释掉）
// cat.touchjs.rotate($targetObj, function (rotate) {
// $('#rotate').text(rotate);
// });
});

</script>
</body>
</html>
</pre>

//预览地址
http://wxserver.knowway.cn/home/moban/touchujs.html

jquery手指触摸滑动放大图片的方法(比较靠谱的方法)的更多相关文章

  1. MovingBoxes左右滑动放大图片插件

    MovingBoxes左右滑动放大图片插件在产品预览时很有用哦 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  2. H5+CSS3实现手指滑动切换图片

    包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...

  3. 手指向上滑动跳转页面的JQ方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  5. Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

    这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...

  6. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  7. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  8. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  9. AJ学IOS（09）UI之UIScrollView代理触摸实现_图片缩放

    AJ分享,必须精品 先看效果 代码 // // NYViewController.m // 05-放大缩小图片UIScrollView // // Created by apple on 15-3-2 ...

随机推荐

  1. requests模块(代理)篇

    - 用户验证 - 代理验证 #可能需要使用HTTP basic Auth, 可以这样 # 格式为 用户名:密码@代理地址:端口地址 proxy = { "http": " ...

  2. 了解一下Spring中用了哪些设计模式？这样回答面试官才稳

    一:简单工厂模式 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式的实质是由一个工厂类根据传入的参数,动态决定应该创建哪一个产品类. ...

  3. django-drf框架自带的路由以及最简化的视图

    0910自我总结 django-drf框架自带的路由以及最简化的视图 路由 一.导入模块 from rest_framework.routers import SimpleRouter 二.初始化路由 ...

  4. 【Java 基础】谈谈集合.List

    目录 1. ArrayList 1.1 ArrayList的构造 1.2 add方法 1.3 remove方法 1.4 查询方法 1.5 一些其他常用方法 1.6 ArrayList小结 2. Vec ...

  5. [Luogu3112] [USACO14DEC]后卫马克Guard Mark

    题意翻译 FJ将飞盘抛向身高为H(1 <= H <= 1,000,000,000)的Mark,但是Mark被N(2 <= N <= 20)头牛包围.牛们可以叠成一个牛塔,如果叠 ...

  6. 浅谈Mysql索引

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 我们都知道,数据库索引可以帮助我们更加快速的找出符合的数据,但是如果不使用索引,Mysql则会从第一条开始查询 ...

  7. CSS3、jQuery实现3D翻书动画

    使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看 HTML <div class="desktop"> <div class=& ...

  8. 图像配准SIFT

    (一)图像特征匹配--SIFT 1.1 SIFT背景简介 SIFT算法是David Lowe在1999年提出的局部特征描述子,并在2004年深入发展和完善. SIFT算法是在尺度空间进行特征检测并确定 ...

  9. Canonical 开源 MicroK8 | 云原生生态周报 Vol. 25

    业界要闻 1.Canonical 开源 MicroK8 面向工作站和边缘/物联网的零运维 Kubernetes!MicroK8 是 Canonical 提供的一款功能强大的企业级 Kubernetes ...

  10. 数据结构（四十四）交换排序（1.冒泡排序（O(n²)）2.快速排序（O(nlogn)）））

    一.交换排序的定义 利用交换数据元素的位置进行排序的方法称为交换排序.常用的交换排序方法有冒泡排序和快速排序算法.快速排序算法是一种分区交换排序算法. 二.冒泡排序 1.冒泡排序的定义 冒泡排序(Bu ...