摘要
有这样的需求需要在手机端预览图片的时候&＃xff0c;实现图片的手势拖动&＃xff0c;放大缩小功能。最终通过touch.js这个插件实现了效果。
touch.js
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护&＃xff0c;也是在百度内部广泛使用的开发工具.
Touch.js的代码已托管于github并开源&＃xff0c;希望能帮助国内更多的开发者学习和开发出优秀的App产品.
Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.
核心代码
imgView为图片的容器img标签。
var target &＃61; document.getElementById("imgView");target.style.webkitTransition &＃61; &＃39;all ease 0.05s&＃39;;touch.on(&＃39;#imgView&＃39;, &＃39;touchstart&＃39;, function (ev) {ev.preventDefault();});var initialScale &＃61; -10;var currentScale;var dx, dy;touch.on(&＃39;#imgView&＃39;, &＃39;pinchend&＃39;, function (ev) {if ($("#imgView").hasClass(&＃39;viewerimg&＃39;)) {$("#imgView").removeClass("viewerimg");};currentScale &＃61; ev.scale - 1;currentScale &＃61; initialScale &＃43; currentScale;currentScale &＃61; currentScale > 2 ? 2 : currentScale;currentScale &＃61; currentScale <1 ? 1 : currentScale;if (currentScale &＃61;&＃61; 1) {$("#imgView").addClass("viewerimg");};this.style.webkitTransform &＃61; &＃39;scale(&＃39; &＃43; currentScale &＃43; &＃39;)&＃39;;console.log("当前缩放比例为:" &＃43; currentScale &＃43; ".");});touch.on(&＃39;#imgView&＃39;, &＃39;pinchend&＃39;, function (ev) {initialScale &＃61; currentScale;});touch.on(&＃39;#imgView&＃39;, &＃39;drag&＃39;, function (ev) {dx &＃61; dx || 0;dy &＃61; dy || 0;this.style.webkitTransform &＃61; &＃39;scale(&＃39; &＃43; currentScale &＃43; &＃39;)&＃39;;console.log("当前x值为:" &＃43; dx &＃43; ", 当前y值为:" &＃43; dy &＃43; ".");var offx &＃61; dx &＃43; ev.x &＃43; "px";var offy &＃61; dy &＃43; ev.y &＃43; "px";this.style.webkitTransform &＃61; "translate3d(" &＃43; offx &＃43; "," &＃43; offy &＃43; ",0)";});touch.on(&＃39;#imgView&＃39;, &＃39;dragend&＃39;, function (ev) {dx &＃43;&＃61; ev.x;dy &＃43;&＃61; ev.y;});
html代码
<style>.viewerimg {width: 100%;height: auto;}style><img id&＃61;"imgView" class&＃61;"viewerimg" draggable&＃61;"true"src&＃61;"{{img.url}}" alt&＃61;"{{img.name}}" title&＃61;"{{img.name}}">
刚开始加载的时候&＃xff0c;让图片宽度跟随屏幕的宽度自适应。这里实现的是手势放大2&＃xff0c;缩小时变为1&＃xff0c;只有两种大小。
京公网安备 11010802041100号