在移动设备上放大图片查看图片细节的俩种方法
类似淘宝京东上的产品图，我们可以放大来看产品的具体细节。那么，在移动设备上，基于Web浏览器的这种效果又是如何实现的呢？
一.使用touchEvent来实现，关于touchEvent的一些基本知识，可以阅读文章——多点触摸网络开发
1.页面代码
<div id="warpper" class="warpper">
<div class="clearfix"></div>
<div id="content" class="content" onclick="change()" >
<img id="testimg" class="testimg" src="http://image.zcool.com.cn/img2/21/50/m_1312514725921.jpg">
</div>
</div>
2.CSS代码
html, body{
margin: 0;
padding: 0;
width:100%;
height:100%;
background:#ddd;
}
.warpper{
position:relative;
width:100%;
height:100%;
margin:auto;
}
.clearfix{
position:relative;
width:100%;
height:100px;
}
.content{
position:relative;
width:450px;
height:338px;
margin:auto;
border:2px solid #92B2CA;
overflow:hidden ;
}
.testimg{
position:absolute;
z-index:1;
width:450px;
height:338px;
top:0px;
left:0px
}
3.JS代码
1 $(document).ready(function(){ 2 var pagewidth = document.body.clientWidth;//获取页面可用宽度 3 $(".content").width(pagewidth*0.8);//设置css类为content标签div的宽度 4 $(".testimg").width(pagewidth*0.8);//设置css类为testimg标签img的宽度 5 $(".content").height($(".testimg").width()*0.75);//设置css类为content标签div的高度 6 $(".testimg").height($(".testimg").width()*0.75);//设置css类为testimg标签img的高度 7 imgInitialWidth = $(".testimg").width();//获取图片testimg的初始宽度 8 imgInitialHeight = $(".testimg").height();//获取图片testimg的初始高度度 9 screenWidth = screen.width;//获取屏幕宽度 10 screenHeight = screen.height;//获取屏幕高度 11 screenDistance = Math.sqrt(screenWidth*screenWidth+screenHeight*screenHeight);//根据屏幕分辨率获取屏幕对角线长 12 }); 13 var oneStartX; 14 var oneStartY; 15 var oneEndX; 16 var oneEndY; 17 var twoStartX; 18 var twoStartY; 19 var twoEndX; 20 var twoEndY; 21 var initialDistance; 22 var moveDistance; 23 var screenWidth; 24 var screenHeight; 25 var screenDistance; 26 var radio; 27 var base; 28 var widthNow; 29 var canvas = document.getElementById("body");//触摸有效的区域元素 30 var imgInitialWidth; 31 var imgInitialHeight; 32 var imgInitialTop; 33 var imgInitialLeft; 34 35 /*改变图片testimg的大小：当图片大小与初始大小一致时改变其大小，变为原来的2倍；否则恢复初始大小*/ 36 function change(){ 37 widthNow = $(".testimg").width(); 38 if(widthNow==imgInitialWidth){ 39 //改变图片大小为初始值的2倍，并移动图片使其在div中居中显示 40 $(".testimg").animate({"width":imgInitialWidth*2,"height":imgInitialHeight*2,"top":-imgInitialHeight/2,"left":-imgInitialWidth/2},500); 41 } 42 else{ 43 //图片恢复初始大小 44 $(".testimg").animate({"width":imgInitialWidth,"height":imgInitialHeight,"top":0,"left":0},500); 45 } 46 } 47 48 /*开始触摸*/ 49 function touchStart(e) { 50 //获取图片testimg的位置参数 51 imgInitialTop = +$(".testimg").css("top").split('p')[0]; 52 imgInitialLeft = +$(".testimg").css("left").split('p')[0]; 53 var touches = e.targetTouches; //获取位于设置dom元素上的手指动作列表 54 var i = 0, l = touches.length,touch,touchId; 55 if(l==1){ 56 oneStartX = touches[0].pageX; 57 oneStartY = touches[0].pageY; 58 } 59 //如果该元素上有俩个手指动作，分别获取手指动作所在坐标，并计算手指之间的初始距离 60 if(l==2){ 61 oneStartX = touches[0].pageX; 62 oneStartY = touches[0].pageY; 63 twoStartX = touches[1].pageX; 64 twoStartY = touches[1].pageY; 65 initialDistance = Math.sqrt((twoStartX-oneStartX)*(twoStartX-oneStartX)+(twoStartY-oneStartY)*(twoStartY-oneStartY)); 66 } 67 widthNow = $(".testimg").width();//获取图片testimg的即时宽度 68 } 69 70 /*触摸移动*/ 71 function touchMove(e) { 72 e.preventDefault(); //关闭触摸移动的默认动作 73 var touches = e.targetTouches; //获取位于设置dom元素上的手指动作列表 74 var i = 0, l = touches.length,touch,touchId; 75 //如果设置dom元素上的只有一个手指动作，则该动作用于移动图片位置，并且只有在图片大小与初始大小不一致时生效 76 if(l==1){ 77 if(widthNow!=imgInitialWidth){ 78 var x = touches[0].pageX - oneStartX; 79 var y = touches[0].pageY - oneStartY; 80 var changeX = imgInitialLeft+x; 81 var changeY = imgInitialTop+y; 82 83 var imgWidthChange = $(".testimg").width()-imgInitialWidth; 84 var imgHeightChange = $(".testimg").height()-imgInitialHeight; 85 86 if(changeX>0){ 87 changeX = 0; 88 89 }else{ 90 if(changeX*(-1)>imgWidthChange){ 91 changeX = -imgWidthChange; 92 93 } 94 } 95 if(changeY>0){ 96 changeY = 0; 97 }else{ 98 if(changeY*(-1)>imgHeightChange){ 99 changeY = -imgHeightChange; 100 } 101 } 102 $(".testimg").css({"top":changeY,"left":changeX}); 103 } 104 base=1; 105 } 106 //如果设置dom元素上的有2个手指动作，则该动作用于确定移动后俩手指坐标 107 if(l==2){ 108 oneEndX = touches[0].pageX; 109 oneEndY = touches[0].pageY; 110 twoEndX = touches[1].pageX; 111 twoEndY = touches[1].pageY; 112 base=2; 113 } 114 } 115 /*触摸结束*/ 116 function touchEnd(e) { 117 //当设置dom元素上的有2个手指动作时，变换图片大小 118 if(base===2){ 119 /* 120 *当移动后的俩手指距离大于触摸开始时的距离，及伸展触摸时，根据手指坐标取得的变换参数来确定图片的变换大小; 121 *当移动后的俩手指距离小于触摸开始时的距离，及收缩触摸时，图片恢复初始大小; 122 */ 123 moveDistance = Math.sqrt((twoEndX-oneEndX)*(twoEndX-oneEndX)+(twoEndY-oneEndY)*(twoEndY-oneEndY));//移动后俩手指之间的距离 124 radio = (moveDistance-initialDistance)*40/screenDistance;//根据滑动距离和页面大小确定的变换参数，可以调整倍数来达到合适效果 125 if(moveDistance>initialDistance){ 126 $(".testimg").animate({"width":imgInitialWidth*radio,"height":imgInitialHeight*radio,"top":-imgInitialHeight*(radio-1)/2,"left":-imgInitialWidth*(radio-1)/2},500); 127 }else{ 128 $(".testimg").animate({"width":imgInitialWidth,"height":imgInitialHeight,"top":0,"left":0},500); 129 } 130 } 131 } 132 133 canvas.addEventListener("touchstart", touchStart, false);//监听触摸启动事件 134 canvas.addEventListener("touchmove", touchMove, false);//监听滑动事件 135 canvas.addEventListener("touchend", touchEnd, false);//监听触摸结束事件 136 137 //阻止body上的触摸默认事件,如翻页、滚动和缩放(有效性有待考证) 138 document.body.addEventListener('touchmove', function(event) { 139 event.preventDefault(); 140 }, false);
整体思路为——事件双点触摸滑动改变图片大小：根据触摸双点前后距离差决定图片放大还是复原，根据俩个点触摸滑动的平均距离决定放大比例，并对应改变图片的top和left，及坐标，保证图片居中显示。事件单点触摸滑动移动图片位置：根据touch的坐标变化来改变图片的top和left，并设置极限值确保图片不会移出。需要注意的是只有 e.targetTouches才能获取到多个手指的坐标，不知道是什么原因。
二.使用js插件来模拟手势效果达到要求，可参考移动web开发，12个触摸及多点触摸事件常用Js插件，具体使用这里不讨论。
总结:
1.js插件功能强大，但是每一个的使用方法都有所不同，想要学会，要下一番功夫，并且定制功能在细节上有其局限性，无法满足某些需要；
2.自己写touch事件，会遇到很多问题，效果也不一定能尽人意，但是能学到更多的知识，而且如果真正理解透彻了，可以写自己的插件!
