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. 洛谷P2051 [AHOI2009] 中国象棋(状压dp)

    题目简介 n*m的棋盘,对每行放炮,要求每行每列炮数<=2,求方案数%9999973 N,M<=100 题目分析 算法考虑 考虑到N,M范围较小,每一行状态只与前面的行状态有关,考虑状压D ...

  2. 2019.4.22 python_Flag

    想了很久  最后觉得还是对编程的知识点好好重新的拉一边 回炉重造并不可笑 虽然从C到java到php到python 有两年的时间了 但是很多知识点都是零零碎碎,没有花时间复习和记录 所以决定从pyth ...

  3. Unity 登录白屏或者黑屏

    如果有一天,突然,你的Unity抽风了,登录界面白屏或者黑屏,不要急着重装.我重装了3次,第四次我再也忍不住了,终于出手了. 找到 C:\Users\hasee\AppData\Roaming\Uni ...

  4. php 安装vld扩展

    下载地址 : http://pecl.php.net/package/vld 此处包是 : vld-0.14.0.tgz 1. tar -xvf  vld-0.14.0.tgz  -C  INSTAL ...

  5. Spring Boot2 系列教程(十五)定义系统启动任务的两种方式

    在 Servlet/Jsp 项目中,如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web基础中的三大组件( ...

  6. 定制的print()输出格式

    #定制print时的显示内容 #烤地瓜案例:主要显示格式digua("cd1","cd2","cd3""),而不是就直接在一个列表 ...

  7. C#方法的定义、调用与调试

    本节内容 1.方法的由来: 2.方法的定义与调用: 3.构造器(一种特殊的方法): 4.方法的重载(Override): 5.如何对方法进行debug: 6.方法的调用与栈* *推荐书目:CLR vi ...

  8. 百万年薪python之路 -- 小数据池和代码块

    1.小数据池和代码块 # 小数据池 -- 缓存机制(驻留机制) # == 判断两边内容是否相等 # a = 10 # b = 10 # print(a == b) # is 是 # a = 10 # ...

  9. 小白终于弄懂了：c#从async/await到Task再到Thread

    1. 为什么会有/怎么解决: async/await的无限嵌套 public async Task<int> myFuncAsync1() { //some code int num = ...

  10. 一、如何使用postman做接口测试笔记一

    一.什么是接口测试 前端(客户端):Android.ios.web 后端(服务端):java.js.css 接口测试即功能测试,接口是用来连接客户端和服务端的,一般接口返回的数据都是json格式 二. ...