模拟双击事件以及图片放大基点问题
时间:2019-09-18
本文章向大家介绍模拟双击事件以及图片放大基点问题,主要包括模拟双击事件以及图片放大基点问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <template> 2 <div> 3 <transition name="maskTransition"> 4 <div class="alert" v-show="showValue" @click="handleShowValue()"> 5 <span class="iconfont icon"></span> 6 </div> 7 </transition> 8 <transition name="dialogTransition"> 9 <div class="dialog" v-show="showValue"> 10 <div class="img-box" ref="ImgBox"> 11 <div class="event" :style="'width:' + width + '%;'" @click.self.stop="amplification($event)"> 12 <img :src="imgUrl" alt=""> 13 </div> 14 </div> 15 </div> 16 </transition> 17 </div> 18 </template> 19 20 <script> 21 import { clicking } from '../../common/isdbclick' 22 23 export default { 24 name: 'agreement', 25 props: { 26 imgUrl: String 27 }, 28 data () { 29 return { 30 showValue: false, 31 width: 100 32 } 33 }, 34 methods: { 35 handleShowValue () { 36 this.showValue = false 37 this.$refs.ImgBox.scrollTop = 0 38 this.$refs.ImgBox.scrollLeft = 0 39 this.$nextTick(() => { 40 this.width = 100 41 }) 42 }, 43 amplification (event) { 44 clicking(() => { 45 let e = event || (event = window.event) 46 let offsetX = e.offsetX 47 let offsetY = e.offsetY 48 if (this.width === 100) { 49 this.width = 200 50 this.$nextTick(() => { 51 this.$refs.ImgBox.scrollTop = this.$refs.ImgBox.scrollTop * 2 + offsetY - this.$refs.ImgBox.scrollTop 52 this.$refs.ImgBox.scrollLeft = this.$refs.ImgBox.scrollLeft * 2 + offsetX - this.$refs.ImgBox.scrollLeft 53 }) 54 } else { 55 this.$refs.ImgBox.scrollTop = this.$refs.ImgBox.scrollTop / 2 - (offsetY - this.$refs.ImgBox.scrollTop) / 2 56 this.$refs.ImgBox.scrollLeft = this.$refs.ImgBox.scrollLeft / 2 - (offsetX - this.$refs.ImgBox.scrollLeft) / 2 57 this.$nextTick(() => { 58 this.width = 100 59 }) 60 } 61 }) 62 } 63 } 64 } 65 </script>
clicking
1 // isondbclick 2 let clicked = 1 3 let clickedTime = { 4 timeA: '', 5 timeB: '' 6 } 7 export const clicking = function (callback) { 8 if (clicked === 1) { 9 clickedTime.timeA = new Date() 10 clicked++ 11 } else if (clicked === 2) { 12 clickedTime.timeB = new Date() 13 if (Math.abs(clickedTime.timeA - clickedTime.timeB) < 400) { 14 // 双击 15 callback() 16 clicked = 1 17 } else { 18 clickedTime.timeA = new Date() 19 } 20 } 21 } 22 23 // const ju = true 24 // const dg = false 25 // export const clicking = function (callback) { 26 // if (clicked === 1) { 27 // // 单击 28 // callback(dg) 29 // clicked++ 30 // } else if (clicked === 2) { 31 // clickedTime.timeA = new Date() 32 // clicked++ 33 // } else if (clicked === 3) { 34 // clickedTime.timeB = new Date() 35 // if (Math.abs(clickedTime.timeA - clickedTime.timeB) < 400) { 36 // // 双击 37 // callback(ju) 38 // clicked = 1 39 // } else { 40 // clickedTime.timeA = new Date() 41 // } 42 // } 43 // }
原文地址:https://www.cnblogs.com/QQPrincekin/p/11541225.html
- IO约束(下)
- 可以通过基类实现的几种功能。vs2008 .net 2.0
- Python基础知识2:字典
- 桶式移位器
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.7 增加了一个js函数的分页方式。
- FireEye报告:揭露新型工控系统恶意软件TRITON
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.6 修改了几个小bug,使用演示。
- Invoke-PSImage:将PS脚本隐藏进PNG像素中并用一行指令去执行它
- linux的内存清理相关知识!
- 一个页面搞定几乎所有的列表需求的实现思路和一点代码。
- 实现 Table 的行交替颜色、选中行变色的一种方法。演示+源码
- 【知识】使用Python来学习数据科学的完整教程
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.4 增加了几个分页算法
- 虚拟时钟
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 移动直播集成问题
- TRTC功能咨询
- TKE集群pod镜像拉取失败定位思路
- Android内存管理(JVM 、DVM(dalvik) 、ART简单介绍)
- WordPress 站点地址被恶意篡改的防护方案讨论
- 猿实战06——不一样的地址管理
- Redis常用命令详解
- three.js 制作逻辑转体游戏(下)
- ROS机器人TF基础(坐标相关概念和实践)
- (在模仿中精进数据可视化01) 全国38城居住自由指数可视化
- js字符串/数组常用方法总结
- ThinkPHP5+mpdf 实现富文本生成 PDF文件
- nodejs使用readline逐行读取和写入文件
- go语言逐行读取和写入文件
- SpringBoot中Tomcat是如何启动的