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. e课表项目第二次冲刺周期第七天

    昨天干了什么? 昨天我查找相关的资料实现对之前的信息连接数据库进行显示,完成修改的功能,并且返回到数据库当中.然后下午,我和我们小组的成员,讨论了第二个界面的具体功能和布局,我们一致同意,引用之前的第 ...

  2. 【CJOJ】为了博多

    Description 做了个噩梦,梦见我的 n 把刀到60级会二次变身,变成一个 对推6图有xi点贡献,刷大阪城有yi点贡献 的刀,于是要把刀分成两队一队刷大阪城另一队推6图 . 但是有m对兄弟刀在 ...

  3. Airport Express UVA - 11374

    In a small city called Iokh, a train service, Airport-Express, takes residents to the airport more q ...

  4. Anrlr4 生成C++版本的语法解析器

    一. 写在前面 我最早是在2005年,首次在实际开发中实现语法解析器,当时调研了Yacc&Lex,觉得风格不是太好,关键当时yacc对多线程也支持的不太好,接着就又学习了Bison&F ...

  5. VMware workstation Windows 10虚拟机安装步骤

    1. 在首页点击创建新的虚拟机 2. 选择典型,下一步 3.选择稍后安装操做系统,下一步. 4. 选择第一个Microsoft Windows,版本选择如图. 5. 选择安装位置,我放在D盘. 7. ...

  6. django-搭建BBS关键点总结

    0826自我总结 django-搭建BBS关键点总结 一.关于开口子,直接输入url访问文件内容 django自带开了个口子是static文件可以直接访问到 手动开口子 urs.py from dja ...

  7. Jmeter结构体系及运行顺序

    一:jmeter运行原理: jmeter时以线程的方式来运行的(由于jmeter是java开发的所以是运行在JVM虚拟机上的,java也是支持多线程的) 二:jmeter结构体系 1.取样器smapl ...

  8. AWD脚本之批量mysql写shell

    摘之工具包中脚本 需要安装mysqldb.windwos环境直接在https://www.codegood.com/archives/129下载MySQL-python-1.2.3.win-amd64 ...

  9. C语言I博客作业05

    内容 答案 这个作业属于哪个课程 C语言程序设计II 这个作业要求在哪里 C语言I作业05 我在这个课程的目标是 更熟练的运用编译函数问题 这个作业在哪个具体方面帮助我实现目标 PTA实验作业 参考文 ...

  10. Unity - HasExitTime用法

    本文详细分析了AnimatorController中动画切换过渡问题,即Translation过渡及hasExitTime的问题.方法为对实际项目中的所有情况进行分类,规划逻辑图,可视化分析解决这些问 ...