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. 关于Qt画点及计算机专业基础课程介绍

    在计算机图形图像学中,开始都是先画点,我曾经在汇编上tc2.0上画点,后来是MFC,VB,Qt,Python,我觉得对于计算机专业的选择QT的原因是它是个C系的功能强大庞大的库,可以少写很多代码,但是 ...

  2. VMware ESXI6.0服务器安装系列：RAID设置

    本文转载至http://www.scriptjc.com/article/847 1.连接显示器 2.插上键盘.U盘.显示器 3.看显示屏上的提示,按F12关机 4.关机前输入密码,然后按回车键 更换 ...

  3. Redis未授权访问写Webshell和公私钥认证获取root权限

    0x01 什么是Redis未授权访问漏洞 Redis 默认情况下,会绑定在 0.0.0.0:,如果没有进行采用相关的策略,比如添加防火墙规则避免其他非信任来源 ip 访问等,这样将会将 Redis 服 ...

  4. 抛弃Eclipse，投入IDEA 的独孤求败江湖

    "工欲善其事,必先利其器" 出处:孔子<论语> 两年了,这是我的 IDEA 实用技巧总结,从前我是一个 Eclipse 忠实用户,直到某天我用上了 IntelliJ I ...

  5. [NOIp2013] luogu P1966 火柴排队

    磕了瓶魔爪. 题目描述 你有两个长度为 NNN 的数组 a,ba,ba,b,试重新排列 aaa 数组使得S=∑i=1n(ai−bi)2S=\sum_{i=1}^{n}{(a_i-b_i)^2}S=i= ...

  6. 我家很管事的猫——mycat初步部署实践与问题排查

    mycat,阿里出品的mysql中间件,提供读写分离和分库分表方案.项目中主要使用的是其读写分离功能. [如何部署?] 本文只采用并测试了双主从模式,配置看这一篇足矣: https://www.cnb ...

  7. Solidity语言系列教程

    Solidity 是一门面向合约的.为实现智能合约而创建的高级编程语言.这门语言受到了 C++,Python 和 Javascript 语言的影响,设计的目的是能在 以太坊虚拟机(EVM) 上运行. ...

  8. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记(二)

    这是一个应用的例子,学以致用嘛 <!--这些代码我就直接放在了博客园的"页首Html代码"中,用于自定义博客,效果就是页面左上角的白色文字--> <p> & ...

  9. ASP.NET Core中的配置

    配置 参考文件点击跳转 配置来源 命令行参数 自定义提供程序 目录文件 环境变量 内存中的.NET 对象 文件 默认配置 CreateDefaultBuilder方法提供有默认配置,在这个方法中会接收 ...

  10. SQL common keywords examples and tricks

    Case Sensitive Check 1. Return names contain upper case Select id, name from A where name<>low ...