手机上图片的放大缩小处理 touch——zoom

最新推荐文章于 2024-06-18 14:47:23 发布
最新推荐文章于 2024-06-18 14:47:23 发布
阅读量8.7k 收藏 5
点赞数 2
分类专栏： demo 文章标签： 放大缩小手机图片 touch_zoom

手机上滑动放大缩小图片的处理

文件目录


html部分 index.html

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>图片缩放</title>
        <link rel="stylesheet" href="css/scale.css" type="text/css" />
    </head>
    <body>
		<!--需要显示的图片-->
    	<ul class="list">
    		<li><img src="images/3.jpg" /></li>
    		<li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
    		<li><img src="images/0.jpg" /></li>
    	</ul>
		<!--图片zoom浮层-->
    	<section class="imgzoom_pack">
    		<div class="imgzoom_x">X</div>
    		<div class="imgzoom_img"><img src="" /></div>
    	</section>
        <script src="js/scale.js"></script>
		<script>
			document.addEventListener("DOMContentLoaded", function(event){
				ImagesZoom.init({
					"elem": ".list"
				});
			}, false);
		</script>
    </body>
</html>

css部分  scale.css 

/**rest**/
body, ul, li, section, div{
	padding:0;
	margin:0;
}
body{
	font-family:Arial,Roboto,'Droid Sans','Hiragino Sans GB',STXihei,'sans-serif';
	width:100%;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust:none;
}
ul,li{
	list-style:none;
}
img{
	border:0;
}

.list{
	width:100%;
	padding:10px 0;
}
.list li{
	display:block;
	margin-bottom:10px;
	box-shadow:0 1px 2px rgba(0,0,0,.1), 0 -1px 2px rgba(0,0,0,.1);
}
.list li img{
	width:100%;
	height:auto;
}



/*弹框样式*/
.imgzoom_pack{
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background:rgba(0,0,0,.6);
	display:none;
}
.imgzoom_pack .imgzoom_x{
	color:#fff;
	height:30px;
	width:30px;
	line-height:30px;
	background:#000;
	text-align:center;
	position:absolute;
	right:5px;
	top:5px;
	z-index:10;
	cursor:pointer;
}
.imgzoom_pack .imgzoom_img{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
}
.imgzoom_pack .imgzoom_img img{
	width:100%;
	position:absolute;
	top:50%;
}
js部分  scale.js

(function(window, undefined){
var document = window.document,
support = {
transform3d: ("WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix()),
touch: ("ontouchstart" in window)
};

function getTranslate(x, y){
var distX = x, distY = y;
return support.transform3d ? "translate3d("+ distX +"px, "+ distY +"px, 0)" : "translate("+ distX +"px, "+ distY +"px)";
}


function getPage(event, page) {
return support.touch ? event.changedTouches[0][page] : event[page];
}


var ImagesZoom = function(){};


ImagesZoom.prototype = {
// 给初始化数据
init: function(param){
var self   = this,
params = param || {};

var imgList   = document.querySelectorAll(params.elem + " img"),
zoomMask  = document.querySelector(".imgzoom_pack"),
zoomImg   = document.querySelector(".imgzoom_pack .imgzoom_img img"),
zoomClose = document.querySelector(".imgzoom_pack .imgzoom_x"),
imgSrc    = "";


self.buffMove   = 3; //缓冲系数
self.buffScale  = 2; //放大系数
self.finger = false; //触摸手指的状态 false：单手指 true：多手指

self._destroy();


zoomClose.addEventListener("click", function(){
zoomMask.style.cssText = "display:none";
zoomImg.src = "";
zoomImg.style.cssText = "";


self._destroy();


document.removeEventListener("touchmove", self.eventStop, false);
}, false);


for(var len=imgList.length,i=0; i<len; i++){
imgList[i].addEventListener("click", function(){
imgSrc = this.getAttribute("src");
zoomMask.style.cssText = "display:block";
zoomImg.src = imgSrc;


zoomImg.onload = function(){
zoomImg.style.cssText = "margin-top:-"+(zoomImg.offsetHeight/2)+"px";


// 禁止页面滚动
document.addEventListener("touchmove", self.eventStop, false);

self.imgBaseWidth  = zoomImg.offsetWidth;
self.imgBaseHeight = zoomImg.offsetHeight;


self.addEventStart({
wrapX: zoomMask.offsetWidth,
wrapY: zoomMask.offsetHeight,
mapX: zoomImg.width,
mapY: zoomImg.height
});
}
}, false);
}
},
addEventStart: function(param){
var self   = this,
params = param || {};


self.element = document.querySelector(".imgzoom_pack img");


//config set
self.wrapX = params.wrapX || 0; //可视区域宽度
self.wrapY = params.wrapY || 0; //可视区域高度
self.mapX  = params.mapX || 0;    //地图宽度
self.mapY  = params.mapY || 0;      //地图高度


self.outDistY = (self.mapY - self.wrapY)/2; //图片超过一屏的时候有用

self.width  = self.mapX - self.wrapX;   //地图的宽度减去可视区域的宽度
self.height = self.mapY - self.wrapY;   //地图的高度减去可视区域的高度


self.element.addEventListener("touchstart",function(e){
self._touchstart(e);
},false);
self.element.addEventListener("touchmove",function(e){
self._touchmove(e);
},false);
self.element.addEventListener("touchend",function(e){
self._touchend(e);
},false);
},
// 重置坐标数据
_destroy: function(){
this.distX = 0;
this.distY = 0;
this.newX  = 0;
this.newY  = 0;
},
// 更新地图信息
_changeData: function(){
this.mapX     = this.element.offsetWidth;  //地图宽度
this.mapY     = this.element.offsetHeight;      //地图高度
// this.outDistY = (this.mapY - this.wrapY)/2; //当图片高度超过屏幕的高度时候。图片是垂直居中的，这时移动有个高度做为缓冲带
this.width    = this.mapX - this.wrapX;   //地图的宽度减去可视区域的宽度
this.height   = this.mapY - this.wrapY;   //地图的高度减去可视区域的高度
},
_touchstart: function(e){
var self = this;


e.preventDefault();


var touchTarget = e.targetTouches.length; //获得触控点数


self._changeData(); //重新初始化图片、可视区域数据，由于放大会产生新的计算


if(touchTarget == 1){
// 获取开始坐标
self.basePageX = getPage(e, "pageX");
self.basePageY = getPage(e, "pageY");


self.finger = false;
}else{
self.finger = true;


self.startFingerDist = self.getTouchDist(e).dist;
self.startFingerX    = self.getTouchDist(e).x;
self.startFingerY    = self.getTouchDist(e).y;
}


console.log("pageX: "+getPage(e, "pageX"));
console.log("pageY: "+getPage(e, "pageY"));
},
_touchmove: function(e){
var self = this;


e.preventDefault();
e.stopPropagation();


console.log("event.changedTouches[0].pageY: "+event.changedTouches[0].pageY);

var touchTarget = e.targetTouches.length; //获得触控点数


if(touchTarget == 1 && !self.finger){
self._move(e);
}


if(touchTarget>=2){
self._zoom(e);
}
},
_touchend: function(e){
var self = this;


self._changeData(); //重新计算数据
if(self.finger){
self.distX = -self.imgNewX;
self.distY = -self.imgNewY;
}


if( self.distX>0 ){
self.newX = 0;
}else if( self.distX<=0 && self.distX>=-self.width ){
self.newX = self.distX;
self.newY = self.distY;
}else if( self.distX<-self.width ){
self.newX = -self.width;
}
self.reset();
},
_move: function(e){
var self = this,
pageX = getPage(e, "pageX"), //获取移动坐标
pageY = getPage(e, "pageY");


// 禁止默认事件
// e.preventDefault();
// e.stopPropagation();


// 获得移动距离
self.distX = (pageX - self.basePageX) + self.newX;
self.distY = (pageY - self.basePageY) + self.newY;


if(self.distX > 0){
self.moveX = Math.round(self.distX/self.buffMove);
}else if( self.distX<=0 && self.distX>=-self.width ){
self.moveX = self.distX;
}else if(self.distX < -self.width ){
self.moveX = -self.width+Math.round((self.distX+self.width)/self.buffMove);
}
self.movePos();
self.finger = false;
},
// 图片缩放
_zoom: function(e){
var self = this;
// e.preventDefault();
// e.stopPropagation();


var nowFingerDist = self.getTouchDist(e).dist, //获得当前长度
ratio  = nowFingerDist / self.startFingerDist, //计算缩放比
imgWidth    = Math.round(self.mapX * ratio), //计算图片宽度
imgHeight  = Math.round(self.mapY * ratio); //计算图片高度


// 计算图片新的坐标
self.imgNewX = Math.round(self.startFingerX * ratio - self.startFingerX - self.newX * ratio);
self.imgNewY = Math.round((self.startFingerY * ratio - self.startFingerY)/2 - self.newY * ratio);


if(imgWidth >= self.imgBaseWidth){
self.element.style.width = imgWidth + "px";
self.refresh(-self.imgNewX, -self.imgNewY, "0s", "ease");
self.finger = true;
}else{
if(imgWidth < self.imgBaseWidth){
self.element.style.width = self.imgBaseWidth + "px";
}
}


self.finger = true;
},
// 移动坐标
movePos: function(){
var self = this;


if(self.height<0){
if(self.element.offsetWidth == self.imgBaseWidth){
self.moveY = Math.round(self.distY/self.buffMove);
}else{
var moveTop = Math.round((self.element.offsetHeight-self.imgBaseHeight)/2);
self.moveY = -moveTop + Math.round((self.distY + moveTop)/self.buffMove);
}
}else{
var a = Math.round((self.wrapY - self.imgBaseHeight)/2),
b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;


if(self.distY >= -a){
self.moveY = Math.round((self.distY + a)/self.buffMove) - a;
}else if(self.distY <= -b){
self.moveY = Math.round((self.distY + b)/self.buffMove) - b;
}else{
self.moveY = self.distY;
}
}
self.refresh(self.moveX, self.moveY, "0s", "ease");
},
// 重置数据
reset: function(){
var self = this,
hideTime = ".2s";
if(self.height<0){
self.newY = -Math.round(self.element.offsetHeight - self.imgBaseHeight)/2;
}else{
var a = Math.round((self.wrapY - self.imgBaseHeight)/2),
b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;


if(self.distY >= -a){
self.newY = -a;
}else if(self.distY <= -b){
self.newY = -b;
}else{
self.newY = self.distY;
}
}
self.refresh(self.newX, self.newY, hideTime, "ease-in-out");
},
// 执行图片移动
refresh: function(x, y, timer, type){
this.element.style.webkitTransitionProperty = "-webkit-transform";
this.element.style.webkitTransitionDuration = timer;
this.element.style.webkitTransitionTimingFunction = type;
this.element.style.webkitTransform = getTranslate(x, y);
},
// 获取多点触控
getTouchDist: function(e){
var x1 = 0,
y1 = 0,
x2 = 0,
y2 = 0,
x3 = 0,
y3 = 0,
result = {};


x1 = e.touches[0].pageX;
x2 = e.touches[1].pageX;
y1 = e.touches[0].pageY - document.body.scrollTop;
y2 = e.touches[1].pageY - document.body.scrollTop;


if(!x1 || !x2) return;


if(x1<=x2){
x3 = (x2-x1)/2+x1;
}else{
x3 = (x1-x2)/2+x2;
}
if(y1<=y2){
y3 = (y2-y1)/2+y1;
}else{
y3 = (y1-y2)/2+y2;
}


result = {
dist: Math.round(Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))),
x: Math.round(x3),
y: Math.round(y3)
};
return result;
},
eventStop: function(e){
e.preventDefault();
e.stopPropagation();
}
};


window.ImagesZoom = new ImagesZoom();
})(this);

七月的岁月童话
关注
专栏目录
android上用QT实现绘制曲线及双指放大缩小
热土程序园，利他愉己~
05-21 708
Android上用QT绘制曲线有多个绘图库可用，比如QCustomPlot,Qwt,Qchart，但经过博主测试在Android上并不是每种库都能满足要求，本文会进行三者对比，并给出一个android上可以实现双指滑动和放大缩小的具体解决方案及代码示例。
MPAndroidChart常见设置属性（一）——应用层
热门推荐
行动者&&职业化
08-16 3万+
本文出自：http://blog.csdn.net/dt235201314/article/details/52222088 MPAndroidChart常见设置属性（一）——应用层 MPAndroidChart项目实战（一）——实现对比性柱状图 MPAndroidChart项目实战（二）——双平滑曲线（双折线图）和MarkView实现 MPAndroidChart项目实战（三）——饼状图实现和...
手机端图片放大缩小功能实现
05-23
可以支持手机端移,进行图片的放大缩小，对于新手很实用。
移动端点击放大、缩放图片，微信端点击放大图片
03-12
移动端点击图片会变成全屏查看的模式，然后可以进行手势缩放。微信端点击放大图片
vue2 手机端照片在指定框内可放大缩小并支持移动照片
最新发布
fishermanMr
06-18 391
为了使图片在缩放时不超出容器，你可能还需要实现额外的逻辑来限制图片的移动范围，确保它始终在指定框内。scaleImage 方法用于处理图片的缩放，通过计算两指之间的距离变化来动态调整缩放比例。moveImage 方法用于图片的移动，通过计算触摸点的位移来更新图片的位置。接下来，创建一个Vue组件来实现图片的移动和缩放功能。首先，你需要安装Hammer.js库来处理触摸事件。上述代码中，图片的移动和缩放是基于触摸事件处理的。请根据实际需求调整样式和逻辑细节。
jQuery实现的移动端图片缩放功能组件示例
10-15
主要介绍了jQuery实现的移动端图片缩放功能组件,结合实例形式详细分析了jQuery基于移动端的图片缩放功能组件实现原理、步骤、核心代码及使用技巧,需要的朋友可以参考下
hammer.js移动端图片手指缩放插件
07-22
手机移动端手指缩放图片的插件hammer.js
手机app实现图片的放大和缩小
weixin_52317968的博客
02-23 269
【代码】手机app实现图片的放大和缩小。
安卓Android源码——控件以及双指放大缩小图片、单指拖动图片.rar
10-11
这个压缩包文件“安卓Android源码——控件以及双指放大缩小图片、单指拖动图片.rar”显然提供了实现这些功能的源代码示例。下面将详细探讨这些关键知识点。 1. **手势识别**： - **多点触控（Multi-Touch）**：...
Android笔记——Muilti-touch 多点缩放
xzwjraohuamin1的专栏
11-13 960
Android笔记——Muilti-touch 多点缩放 本文主要讨论文本的多点缩放。 多点缩放原理：通过Android中触摸事件，判断当前屏幕上有多少个点。当有两个或则更多个点时，先保存当前亮点间的距离值oldDisc，手滑动之后，距离发生变化为newDisc。 如果newDisc > oldDisc，放大文字；newDisc 代码实现过程：只需要三个文件MultiTo
python控制苹果手机触摸,Appium+python自动化（二十九）- 模拟手指在手机上多线多点作战...
weixin_42362931的博客
03-26 2392
简介在网页中我们经常使用缩放操作来便利的查看具体的信息，在appium中使用MultiAction多点触控的类来实现。MultiAction是多点触控的类，可以模拟用户多点操作。主要包含加载add()和执行perform()两个方法.问题思考在使用地图App中，我们经常需要对界面进行缩放操作来更加便利的查看位置。那么在Appium中怎样去模拟这类操作呢？MultiActionMultiAction...
真正的image zoom,图片放大镜效果
07-27
其他的放大镜大多是一张大图 一张小图 从而实现放大效果。我改进了一下 实现了真正的放大效果，只需要一张图图片即可，可以放大任意倍数。 xzoom: 288, //放大后div的宽 yzoom: 300, //放大后div的高 offset: 10,//间距 position: "right",//位置 zoomWidth:400,//放大后图片的宽，主要设置这里 zoomHeight:400//放大后div的高，只要设置这里
images-zoom:基于 jQuery 的图片放大镜 - 商城商品详情图片放大效果
05-10
基于 jQuery 的图片放大镜 使用方法 $('.show').zoomImage({ layerW: 200, // 遮罩宽度 layerH: 200, // 遮罩高度 layerOpacity: 0.5, // 遮罩透明度 layerBgc: '#000', // 遮罩背景颜色 showPanelW: 500, // 显示放大区域宽 showPanelH: 500, // 显示放大区域高 marginL: 20, // 放大区域离缩略图右侧距离 marginT: 0 // 放大区域离缩略图上侧距离 });
imagezoom实现图片缩放示例
05-18
代码作为csdn博客（最简单的实现图片的放大和缩小（就像操作ImageView一样））示例，如有问题博客留言
H5手机图片点击放大 swiper+photoswipe
05-23
主要是new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); 这几个参数要传对，前两个固定的，文档有些，第三个是放大图片集合，文档里面写了集合需要的参数。
zoom插件实现图片放大缩小功能
小耿的博客
09-03 1万+
不多说，上代码 js代码 $(document).ready(function() { var imgv = $('') $('#imgContainer').append(imgv); $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
图片放大缩小的zoom.js
weixin_30423977的博客
07-30 364
1 +function ($) { "use strict"; 2 3 /** 4 * The zoom service 5 */ 6 function ZoomService () { 7 this._activeZoom = 8 this._initialScrollPosition ...
点击查看大图滑动预览touchTouch app放大缩小pinchzoom
weixin_42448623的博客
12-06 512
https://pan.baidu.com/s/1_BCUSss8_3i3yiSATyc89w 提取码: h436 <!DOCTYPE html> <html> 　　<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met...
图片的遮罩，缩放，移动
qq_45768703的博客
02-21 465
统合了两个大佬的 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="https://cdn.staticfil
自定义ImageView实现Android多点触控图片放大缩小
总结来说，本文档提供了一个实现Android应用中手势滑动多点触摸图片放大缩小功能的实用教程，涉及了自定义View、事件处理、数据计算和界面响应等多个关键环节。对于希望在Android开发中实现类似功能的开发者来说，这...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值