未加星标

[js/jquery]移动端手势拖动,放大,缩小预览图片

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
摘要

有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能。最终通过touch.js这个插件实现了效果。

touch.js

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.

Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品.

Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.

核心代码

imgView为图片的容器img标签。


var target = document.getElementById("imgView");
target.style.webkitTransition = 'all ease 0.05s';
touch.on('#imgView', 'touchstart', function (ev) {
ev.preventDefault();
});
var initialScale = -10;
var currentScale;
var dx, dy;
touch.on('#imgView', 'pinchend', function (ev) {
if ($("#imgView").hasClass('viewerimg')) {$("#imgView").removeClass("viewerimg");
};
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > 2 ? 2 : currentScale;
currentScale = currentScale < 1 ? 1 : currentScale;
if (currentScale == 1) {$("#imgView").addClass("viewerimg");
};
this.style.webkitTransform = 'scale(' + currentScale + ')';
console.log("当前缩放比例为:" + currentScale + ".");
});
touch.on('#imgView', 'pinchend', function (ev) {
initialScale = currentScale;
});
touch.on('#imgView', 'drag', function (ev) {
dx = dx || 0;
dy = dy || 0;
this.style.webkitTransform = 'scale(' + currentScale + ')';
console.log("当前x值为:" + dx + ", 当前y值为:" + dy + ".");
var offx = dx + ev.x + "px";
var offy = dy + ev.y + "px";
this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
});
touch.on('#imgView', 'dragend', function (ev) {
dx += ev.x;
dy += ev.y;
});

html代码


<style>
.viewerimg {width: 100%;height: auto;
}
</style>
<img id="imgView" class="viewerimg" draggable="true"src="{{img.url}}" alt="{{img.name}}" title="{{img.name}}">

刚开始加载的时候,让图片宽度跟随屏幕的宽度自适应。这里实现的是手势放大2,缩小时变为1,只有两种大小。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 开源浏览器百度需求
分页:12
转载请注明
本文标题:[js/jquery]移动端手势拖动,放大,缩小预览图片
本站链接:http://www.codesec.net/view/480714.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(44)