<!DOCTYPE html>
<html>

<head>
<meta 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" type="text/css" href="scale.css" />
<script src="../../js/scale.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.list img{
width: 200px;
height: 200px;
}
/*弹框样式*/
.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%;
}
</style>
</head>

<body>
<div class="list">
<img src="../../img/biyadi.jpg" />
<img src="../../img/biyadi.jpg" />
</div>
<section class="imgzoom_pack">
<div class="imgzoom_x">X</div>
<div class="imgzoom_img"><img src="" /></div>
</section>
<script src="scale.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
ImagesZoom.init({
"elem": ".list"
});
}, false);
</script>
</body>

</html>

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);

转载于:https://www.cnblogs.com/cyhsmile/p/11212278.html

移动端单击图片放大缩小相关推荐

  1. 移动端查看预览图片放大缩小

    方法一 之前介绍过一款 移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...

  2. css3 图片放大缩小闪烁效果

    直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉 <!doctype html> <html lang="en"> < ...

  3. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  4. 图片放大缩小旋转左移右移镜像倒影android

    图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...

  5. iphone iPhone开发中如何将制作图片放大缩小代码实现案例

    1:原文摘自:http://mobile.51cto.com/iphone-285108.htm iPhone开发中如何将制作图片放大缩小案例是本文要介绍的内容,主要是来学习iphone开发中动画的制 ...

  6. 点击图片放大缩小功能

    1.点击图片放大缩小的思路 图片部分: <table><div><img style="width:62px;height:83px;display:block ...

  7. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

  8. html如何控制图片自动放缩,如何用js控制图片放大缩小

    js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...

  9. 【Axure交互教程】滑块控制图片放大缩小效果

    作品名称:滑块控制图片放大缩小效果 作品编号:Case007 软件版本:Axure9 作品类型:交互案例 原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...

最新文章

  1. 若依 v4.6.1 后台 排除log4j
  2. JQuery.Ajax 错误调试帮助信息
  3. GoDaddy服务器MySQL配置文件，仅供参考
  4. Django 3.2.5博客开发教程:HelloWorld欢迎页面
  5. 使用timer控件创建一个简单的报警程序
  6. Eclipse中使用自己的makefile管理工程
  7. ECMAScript 实现继承的几种方式
  8. 电脑安装python后开不了机_ubuntu 安装python3.6后,terminal终端打不开问题
  9. Windows Maven环境变量配置
  10. linux ortp 编译,编译oRTP库
  11. 推荐Python互动艺术在线编辑器（腾讯扣叮）
  12. 【智能制造】推进智能制造，他山之石可以攻玉！
  13. SSM框架整合-404
  14. js实现进度条组件（Progress）
  15. 什么是单片机中的掉电复位（BOR）？如何防止错误掉电
  16. raster包—resample函数
  17. css动画其他div,删除另一个div时的CSS3 Transition动画
  18. uni-app H5 上传图片
  19. YOLOv5实战中国交通标志识别(TT100K数据集)
  20. FE内容付费系统响应式(带手机版) v5.46

热门文章

  1. win10 批量修改文件权限
  2. AUTOSAR的一般开发流程(单个ECU)
  3. R语言中的试验一致性检验分析
  4. oracle简单查询语句
  5. 使用jQuery制作图书简介
  6. 《Think Python 2e》作业实现（二）： 变量、表达式和语句
  7. ORA-00933: SQL命令未正确结束 解决办法
  8. 打印 上一主题 下一主题 简单讲解UEFI及MBR，及UEFI系统安装引导修复
  9. DNS域名解析服务--Named服务
  10. 浅谈集合List,Set以及Map集合的特点及区别