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. 阿里云学生服务器+WordPress搭建个人博客

    搭建过程: 第一步:首先你需要一台阿里云服务器ECS,如果你是学生,可以享受学生价9.5元/月 (阿里云翼计划:https://promotion.aliyun.com/ntms/act/campus ...

  2. CS184.1X 计算机图形学导论 作业0

    1.框架下载 在网站上下载了VS2012版本的作业0的框架,由于我的电脑上的VS是2017版的,根据提示安装好C++的版本,并框架的解决方案 重定解决方案目标为2017版本. 点击运行,可以出来界面. ...

  3. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  4. Web安全之变量覆盖漏洞

    通常将可以用自定义的参数值替换原有变量值的情况称为变量覆盖漏洞.经常导致变量覆盖漏洞场景有:$$使用不当,extract()函数使用不当,parse_str()函数使用不当,import_reques ...

  5. 后门木马免杀-msfvenom和msf5(evasion)

    贴上使用笔记 不多介绍了 很简单的东西 msfvenom各平台生成木马大全: windows:msfvenom -a x86 --platform Windows -p windows/meterpr ...

  6. PHP array_filter

    1.函数的作用:过滤数组中的值: 2.函数的参数: @params  array $array @params  callback $callback @params int $flag [ARRAY ...

  7. 03jmeter-json提取器

    要解决的问题:接口返回数据为json格式,需要获取返回结果中的某些值以便后续接口使用 注:可用json path tester(https://jsonpath.curiousconcept.com/ ...

  8. jmeter-使用代理服务器录制脚本

    使用代理服务器录制脚本 1.测试计划-添加线程组 2.工作台添加HTTP代理服务器(路径:工作台-右键添加-非测试元件-HTTP代理服务器) 3.端口号一般由8888改为其他的 4.打开chrome的 ...

  9. 17.Linux搭建网络仓库

    1.搭建一个网络仓库 服务端:10.0.0.201 1.准备软件包(1.光盘 2.缓存 3.联网下载 4.同步) 1.挂载光盘 mount /dev/cdrom 2.通过ftp共享软件包存放的目录 y ...

  10. 3、Struts2的API访问和数据封装

    一.API的访问 在使用Struts2的框架的过程中,发现Struts2和Servlet的API是解耦合的.在实际开发中,经常使用到Servlet的API,比如进行登录,将用户的信息保存到Sessio ...