标签:style c class blog code java
类似淘宝京东上的产品图,我们可以放大来看产品的具体细节。那么,在移动设备上,基于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代码
$(document).ready(function(){ var pagewidth = document.body.clientWidth;//获取页面可用宽度 $(".content").width(pagewidth*0.8);//设置css类为content标签div的宽度 $(".testimg").width(pagewidth*0.8);//设置css类为testimg标签img的宽度 $(".content").height($(".testimg").width()*0.75);//设置css类为content标签div的高度 $(".testimg").height($(".testimg").width()*0.75);//设置css类为testimg标签img的高度 imgInitialWidth = $(".testimg").width();//获取图片testimg的初始宽度 imgInitialHeight = $(".testimg").height();//获取图片testimg的初始高度度 screenWidth = screen.width;//获取屏幕宽度 screenHeight = screen.height;//获取屏幕高度 screenDistance = Math.sqrt(screenWidth*screenWidth+screenHeight*screenHeight);//根据屏幕分辨率获取屏幕对角线长 }); var oneStartX; var oneStartY; var oneEndX; var oneEndY; var twoStartX; var twoStartY; var twoEndX; var twoEndY; var initialDistance; var moveDistance; var screenWidth; var screenHeight; var screenDistance; var radio; var base; var widthNow; var canvas = document.getElementById("body");//触摸有效的区域元素 var imgInitialWidth; var imgInitialHeight; var imgInitialTop; var imgInitialLeft; /*改变图片testimg的大小:当图片大小与初始大小一致时改变其大小,变为原来的2倍;否则恢复初始大小*/ function change(){ widthNow = $(".testimg").width(); if(widthNow==imgInitialWidth){ //改变图片大小为初始值的2倍,并移动图片使其在div中居中显示 $(".testimg").animate({"width":imgInitialWidth*2,"height":imgInitialHeight*2,"top":-imgInitialHeight/2,"left":-imgInitialWidth/2},500); } else{ //图片恢复初始大小 $(".testimg").animate({"width":imgInitialWidth,"height":imgInitialHeight,"top":0,"left":0},500); } } /*开始触摸*/ function touchStart(e) { //获取图片testimg的位置参数 imgInitialTop = +$(".testimg").css("top").split(‘p‘)[0]; imgInitialLeft = +$(".testimg").css("left").split(‘p‘)[0]; var touches = e.targetTouches; //获取位于设置dom元素上的手指动作列表 var i = 0, l = touches.length,touch,touchId; if(l==1){ oneStartX = touches[0].pageX; oneStartY = touches[0].pageY; } //如果该元素上有俩个手指动作,分别获取手指动作所在坐标,并计算手指之间的初始距离 if(l==2){ oneStartX = touches[0].pageX; oneStartY = touches[0].pageY; twoStartX = touches[1].pageX; twoStartY = touches[1].pageY; initialDistance = Math.sqrt((twoStartX-oneStartX)*(twoStartX-oneStartX)+(twoStartY-oneStartY)*(twoStartY-oneStartY)); } widthNow = $(".testimg").width();//获取图片testimg的即时宽度 } /*触摸移动*/ function touchMove(e) { e.preventDefault(); //关闭触摸移动的默认动作 var touches = e.targetTouches; //获取位于设置dom元素上的手指动作列表 var i = 0, l = touches.length,touch,touchId; //如果设置dom元素上的只有一个手指动作,则该动作用于移动图片位置,并且只有在图片大小与初始大小不一致时生效 if(l==1){ if(widthNow!=imgInitialWidth){ var x = touches[0].pageX - oneStartX; var y = touches[0].pageY - oneStartY; var changeX = imgInitialLeft+x; var changeY = imgInitialTop+y; var imgWidthChange = $(".testimg").width()-imgInitialWidth; var imgHeightChange = $(".testimg").height()-imgInitialHeight; if(changeX>0){ changeX = 0; }else{ if(changeX*(-1)>imgWidthChange){ changeX = -imgWidthChange; } } if(changeY>0){ changeY = 0; }else{ if(changeY*(-1)>imgHeightChange){ changeY = -imgHeightChange; } } $(".testimg").css({"top":changeY,"left":changeX}); } base=1; } //如果设置dom元素上的有2个手指动作,则该动作用于确定移动后俩手指坐标 if(l==2){ oneEndX = touches[0].pageX; oneEndY = touches[0].pageY; twoEndX = touches[1].pageX; twoEndY = touches[1].pageY; base=2; } } /*触摸结束*/ function touchEnd(e) { //当设置dom元素上的有2个手指动作时,变换图片大小 if(base===2){ /* *当移动后的俩手指距离大于触摸开始时的距离,及伸展触摸时,根据手指坐标取得的变换参数来确定图片的变换大小; *当移动后的俩手指距离小于触摸开始时的距离,及收缩触摸时,图片恢复初始大小; */ moveDistance = Math.sqrt((twoEndX-oneEndX)*(twoEndX-oneEndX)+(twoEndY-oneEndY)*(twoEndY-oneEndY));//移动后俩手指之间的距离 radio = (moveDistance-initialDistance)*40/screenDistance;//根据滑动距离和页面大小确定的变换参数,可以调整倍数来达到合适效果 if(moveDistance>initialDistance){ $(".testimg").animate({"width":imgInitialWidth*radio,"height":imgInitialHeight*radio,"top":-imgInitialHeight*(radio-1)/2,"left":-imgInitialWidth*(radio-1)/2},500); }else{ $(".testimg").animate({"width":imgInitialWidth,"height":imgInitialHeight,"top":0,"left":0},500); } } } canvas.addEventListener("touchstart", touchStart, false);//监听触摸启动事件 canvas.addEventListener("touchmove", touchMove, false);//监听滑动事件 canvas.addEventListener("touchend", touchEnd, false);//监听触摸结束事件 //阻止body上的触摸默认事件,如翻页、滚动和缩放(有效性有待考证) document.body.addEventListener(‘touchmove‘, function(event) { event.preventDefault(); }, false);
整体思路为——事件双点触摸滑动改变图片大小:根据触摸双点前后距离差决定图片放大还是复原,根据俩个点触摸滑动的平均距离决定放大比例,并对应改变图片的top和left,及坐标,保证图片居中显示。事件单点触摸滑动移动图片位置:根据touch的坐标变化来改变图片的top和left,并设置极限值确保图片不会移出。需要注意的是只有 e.targetTouches才能获取到多个手指的坐标,不知道是什么原因。
二.使用js插件来模拟手势效果达到要求,可参考移动web开发,12个触摸及多点触摸事件常用Js插件,具体使用这里不讨论。
总结:
1.js插件功能强大,但是每一个的使用方法都有所不同,想要学会,要下一番功夫,并且定制功能在细节上有其局限性,无法满足某些需要;
2.自己写touch事件,会遇到很多问题,效果也不一定能尽人意,但是能学到更多的知识,而且如果真正理解透彻了,可以写自己的插件!
在移动设备上放大图片查看图片细节的俩种方法,布布扣,bubuko.com
标签:style c class blog code java
原文地址:http://www.cnblogs.com/crookie/p/3741771.html