js 实现页面局部(或图片)放大功能(vue)
方法:
adjustStart1 (e) {
e.preventDefault()
let event = e.touches
if (event.length === 2) {
this.styles = 'transform: scale(2)'
}
},
// 调整开始
adjustStart (e) {
let event = e.touches
this.fingerA.startX = event[0].pageX
this.fingerA.startY = event[0].pageY
// 移动
if (event.length === 1) {
this.isDrag = true
this.isScale = false
// 缩放
} else if (event.length === 2) {
this.isScale = true
this.isDrag = false
this.fingerB.startX = event[1].pageX
this.fingerB.startY = event[1].pageY
}
},
// 调整中,移动或缩放
adjustIng (e) {
let event = e.touches
this.fingerA.endX = event[0].pageX
this.fingerA.endY = event[0].pageY
// 移动
if (this.isDrag) {
// 本次移动距离要加上之前移动的距离
this.move.x = this.fingerA.endX - this.fingerA.startX + this.move.temX
this.move.y = this.fingerA.endY - this.fingerA.startY + this.move.temY
this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})`
} else if (this.isScale) {
// 缩放
this.fingerB.endX = event[1].pageX
this.fingerB.endY = event[1].pageY
// 两手指间距离
let distanceStart = Math.sqrt(
Math.pow(this.fingerA.startX - this.fingerB.startX, 2) + Math.pow(this.fingerA.startY - this.fingerB.startY, 2)
)
let distanceEnd = Math.sqrt(
Math.pow(this.fingerA.endX - this.fingerB.endX, 2) + Math.pow(this.fingerA.endY - this.fingerB.endY, 2)
)
this.move.scale = (distanceEnd / distanceStart) * this.move.temScale
// 向量叉乘,求出旋转方向及角度
// 开始两个手指的向量
var vector1 = new this.Vector(
this.fingerA.startX,
this.fingerA.startY,
this.fingerB.startX,
this.fingerB.startY
)
// 结束时两个手指的向量
var vector2 = new this.Vector(
this.fingerA.endX,
this.fingerA.endY,
this.fingerB.endX,
this.fingerB.endY
)
var cos = this.calculateVM(vector1, vector2)
var angle = (Math.acos(cos) * 180) / Math.PI
var direction = this.calculateVC(vector1, vector2)
this.move.allDeg = direction * angle + this.move.temDeg
this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})`
}
},
// 调整结束
adjustEnd (e) {
this.move.temX = this.move.x
this.move.temY = this.move.y
this.move.temScale = this.move.scale
this.move.temDeg = this.move.allDeg
this.isDrag = false
this.isScale = false
},
calculateVM (vector1, vector2) {
return (
(vector1.x * vector2.x + vector1.y * vector2.y) /
(Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) *
Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y))
)
},
calculateVC (vector1, vector2) {
return vector1.x * vector2.y - vector2.x * vector1.y > 0 ? 1 : -1
},
Vector (x1, y1, x2, y2) {
this.x = x2 - x1
this.y = y2 - y1
}
调用方法:
<div :style="styles" @touchstart.stop="adjustStart($event)" @touchmove.stop="adjustIng" @touchend.stop="adjustEnd"></div>
data 中定义变量:
isScale: false,
isDrag: false,
styles: '',
actived: 1,
value1: '',
limitHourValue: '',
hourList: ['11', '12', '13', '14', '17', '18', '19', '20', '21'],
// 手指A
fingerA: {
startX: 0,
startY: 0,
endX: 0,
endY: 0
},
// 手指B
fingerB: {
startX: 0,
startY: 0,
endX: 0,
endY: 0
},
// 调整数据
move: {
x: 0,
y: 0,
temX: 0,
temY: 0,
scale: 1,
temScale: 1,
allDeg: 0,
temDeg: 0
},
// 默认样式
imgPosition: {
left: 0,
top: 0,
width: 0,
height: 0
}
js 实现页面局部(或图片)放大功能(vue)的更多相关文章
- jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
- 图片放大功能如何做?jquery实现
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...
- Typora配置双击图片放大功能
在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- jquery图片放大功能简单实现
图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js实现页面局部弹窗打印
原文出自:http://www.haorooms.com/post/css3media 在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印.网上看了一下,大体上有2中实现方法,一种是用cs ...
随机推荐
- 在Linux(centos)下,安装Apache和PHP环境
1001 ll /opt/lampp/modules/ 1002 history | grep httpd 1003 vim /etc/httpd/conf/httpd.conf 1004 v ...
- bcolz
raise Exception("this is an ex") bcolz总结: 0.需要用bcolz的columns需要为ndarray的列,不能直接拿list去赋值,因为我发 ...
- 【JZOJ6378】小w与数字游戏(game)
description analysis 对于\(n\)很大,一眼看出来肯定有两个相等的数减出来是\(0\),答案肯定是\(0\) 其实只要\(n>7\),由于斐波那契数列,肯定能有几个数的和减 ...
- 10月23日——作业1——while循环练习
while循环'''此类编程题,注意带进去试一试1.九九乘法表row=1while row<=9: col=1 while col<=row: print(col,"*" ...
- csp-s模拟100,101T1,T2题解
题面:https://www.cnblogs.com/Juve/articles/11799325.html 我太蒻了只会T1T2 组合: 欧拉路板子?不会呀... 然后打了个优化,防止暴栈 #inc ...
- POJ 2104:K-th Number 整体二分
感觉整体二分是个很有趣的东西. 在别人的博客上看到一句话 对于二分能够解决的询问,如果有多个,那么如果支持离线处理的话,那么就可以使用整体二分了 树套树写了一天还是WA着,调得焦头烂额,所以决定学cd ...
- 关于Async与Await的FAQ
=============C#.Net 篇目录============== 环境:VS2012(尽管System.Threading.Tasks在.net4.0就引入,在.net4.5中为其增加了更丰 ...
- 好用的抓取dump的工具-ProcDump
Procdump是一个轻量级的Sysinternal团队开发的命令行工具, 它的主要目的是监控应用程序的CPU异常动向, 并在此异常时生成crash dump文件, 供研发人员和管理员确定问题发生的原 ...
- 分类算法之朴素贝叶斯分类(Naive Bayesian classification)
分类算法之朴素贝叶斯分类(Naive Bayesian classification) 0.写在前面的话 我个人一直很喜欢算法一类的东西,在我看来算法是人类智慧的精华,其中蕴含着无与伦比的美感.而每次 ...
- java.sql.SQLSyntaxErrorException: ORA-00932: 数据类型不一致: 应为 NUMBER, 但却获得 BINARY
2019-07-24 17:24:35 下午 [Thread: http-8080-4][ Class:net.sf.ehcache.store.disk.Segment Method: net.sf ...