touch.js-scale

最新推荐文章于 2023-12-21 17:51:06 发布

Vivian_shuang

最新推荐文章于 2023-12-21 17:51:06 发布

阅读量4.5k

点赞数

分类专栏： JavaScript 文章标签： touch

本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51900822

版权

JavaScript 专栏收录该内容

171 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

maximum-scale=1.0, user-scalable=0">

</head>

<body>

var target = document.getElementById("target");

target.style.webkitTransition = 'all ease 0.05s';

touch.on('#target', 'touchstart', function(ev) {

ev.preventDefault();

});

var initialScale = 1;

var currentScale;

touch.on('#target', 'pinchend', function(ev) {

currentScale = ev.scale - 1;

currentScale = initialScale + currentScale;

currentScale = currentScale > 2 ? 2 : currentScale;

currentScale = currentScale < 1 ? 1 : currentScale;

this.style.webkitTransform = 'scale(' + currentScale + ')';

console.log("当前缩放比例为:" + currentScale + ".");

});

touch.on('#target', 'pinchend', function(ev) {

initialScale = currentScale;

});

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Vivian_shuang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

scale.js手机点击图片缩放插件

09-30

scale.js插件。在点击图片后可进行缩放如同淘宝商品详情页的图片缩放功能

JS进阶篇--touch.js 拖动、缩放、旋转（鼠标手势）

weixin_33843947的博客

01-20

1063

可以实现手势操作：拖动、缩放、旋转。封装好的脚本方法是这样的： var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 cur...

参与评论您还未登录，请先登录后发表或查看评论

什么是 Scale.js ?

02-22

991

Scala.js是一款将 Scala 代码编译为 JavaScript 代码的编译器，该编译器支持全部 Scala 语言特性。借助于 Scala.js，开发者能够使用 Scala 开发从前端到后端的 Web 应用，而且 Scala.js 还带来了在服务器和客户端之间复用代码的可能性。Scala.js 值得关注的特性包括：支持 Scala 语言的所有特性，包括宏 (macros)，仅有一些语义的不同；同 JavaScript 代码具有良好的互操作性，如 Scala.js 代码中以类型化或者非类型化方.

D3.js中的Scale用法

祥子的博客

10-16

5729

在介绍 scale 之前，先介绍两个经常和 scale 一起出现的函数，在上一节中也出现了。 d3.max() d3.min() 它们用于求一个数组中的最大值和最小值，如果是一维数组，使用方法如下：var dataset = [ 30, 20 , 52 , 2 , 11 ]; var result = d3.max( dataset );变量 result 中保存的是数组 datase

原生js获取元素transform的scale和rotate

qq_37899792的博客

08-30

3129

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #divTransform { margin: 30px; width: 200px; height: 100px; background-color: ye.

touch.js JQuery touch插件

06-22

百度touch.js API教程

01-18

**百度Touch.js API 教程** Touch.js是百度推出的一款专为移动设备设计的轻量级触控事件处理库。它旨在简化在HTML5环境中处理触摸事件的工作，为开发者提供了丰富的API接口，使得在手机、平板等触屏设备上开发交互...

touch.js 拖动、缩放、旋转（鼠标手势）功能代码

12-12

可以实现手势操作：拖动、缩放、旋转。封装好的脚本方法是这样的： var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, ... touch.on($targetObj, 'touchstart', function (ev) { c

移动设备手势事件库Touch.js使用详解

10-19

其次，Touch.js支持双指缩放事件（Scale）。在这个事件中，我们首先给目标元素设置一个初始缩放比例（initialScale），然后通过监听pinchend事件来获取用户的缩放比例（currentScale）。根据双指缩放的最终状态，...

实现移动端点击图片放大，两指缩放 scale.js实现

weixin_30312563的博客

03-28

8962

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maxi...

IE8兼容scale的第三方js

10-10

IE8兼容scale的第三方js

jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

11-22

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考，具体如下：该插件是文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

grayscale.js

08-03

网页页面置灰用的工具js

html5 中scale函数,javascript中scale怎么使用？

weixin_39861918的博客

06-22

1841

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。scale() 方法：scale() 方法缩放当前绘图至更大或更小。如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布...

js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

m0_66722601的博客

01-16

1889

js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

js 改变html scale,javascript – 使用CSS变换scale()放大元素而不进行裁剪,维护滚动

weixin_34759490的博客

06-18

809

为什么不只是将TransformOrigin重新定位到0,并在动画后使用正确的scrollTop / scrollLeft？如果您不需要动画,TransformOrigin总是保持0 0,只有滚动才能显示该框.为了使动画变得不那么有用,只能使用转换条件进行转换,否则转换起点也会被动画化.我已经编辑了4×4元素的例子,但是我认为将一个框完全放大到视图是有意义的,这就是为什么我改变了缩放级别.但是,如...

scale html 浏览器,javascript中scale怎么使用？

weixin_42100032的博客

06-09

692

WEB 3D技术 three.js scale元素大小缩放

最新发布

weixin_45966674的博客

12-21

745

运行之后明显子元素大非常多因为父元素是原本的两倍那么子元素默认继承父元素大小自己又放大两倍那么他就是基础的四倍大小了。y就是上下这样我们y1 明显上下就小了一些 x2 横向的还可以的场。这里我们用scale的set函数将他的 x y z三轴全部放大2倍。与position 一样他的基础单位是相对父元素的scale。也就是说父元素被放大子元素的默认值就会更大。然后z 就是面对我们的这一面我们给图转过来。我们可以给子元素的 scale 设置一下。

抖音上很火的苹果手机称重touchscale原理

cnfly8

05-07

3148

工具网址：https://touchscale.absoft.cn/ iPhone 6s 发布时，苹果推出了 3D Touch 功能，可以利用重力传感器感应屏幕按压的力度，官方明确指出这一功能可以让用户在绘画软件上拥有更多笔触，部分开发者利用这一特性使 iPhone 实现了「称重」功能，虽然苹果官方由于担心这一行为会造成硬件损坏，禁止此类型的应用在应用商店发行，但开发者依然开发了网页版的称重计，只需在 Safari 上打开页面，即可称重日常小物体的重量。称重计：TouchScale 使用方.

用uniapp的uni.requireNativePlugin('bindingx')插件，写个拖动，缩小，放大页面，用的页面是nvue

05-26

好的，下面是一个简单的示例代码： 1. 在 pages.json 中添加插件配置： ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" }, "usingComponents": { "van-button": "/static/vant/button/index" }, "uni": { "enablePullDownRefresh": true, "disableScroll": false, "disableSwipeBack": false, "pageOrientation": "portrait", "backgroundColor": "#f8f8f8", "pullRefreshOptions": { "style": "default", "textColor": "#000000", "refreshingText": "正在刷新...", "completeText": "刷新完成", "failText": "刷新失败" }, "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "backgroundTextStyle": "dark", "backgroundColorTop": "#ffffff", "backgroundColorBottom": "#ffffff", "usingComponents": { "van-button": "/static/vant/button/index" }, "plugins": { "bindingx": { "version": "1.0.0", "provider": "dcloudio.unipluginbindingx" } } } } ] } ``` 2. 在 index.nvue 中添加一个可拖动的元素： ```html <template> <view class="box" :style="{ transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})` }"> <text>我可以拖动哦~~~</text> </view> </template> <style> .box { position: absolute; width: 200px; height: 200px; background-color: #f1f1f1; border: 1px solid #ccc; font-size: 18px; text-align: center; line-height: 200px; border-radius: 10px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } </style> ``` 3. 在 index.js 中添加拖动和缩放的逻辑： ```javascript import Vue from 'vue'; const bindingx = uni.requireNativePlugin('bindingx'); Vue.mixin({ mounted() { this.bindEvent(); }, methods: { bindEvent() { const box = this.$refs.box; const start = { x: 0, y: 0 }; let lastX = 0; let lastY = 0; let lastScale = 1; let isMove = false; box.addEventListener('touchstart', (event) => { const touches = event.touches; if (touches.length === 1) { const touch = touches[0]; start.x = touch.pageX; start.y = touch.pageY; } else { isMove = true; const touch1 = touches[0]; const touch2 = touches[1]; lastX = (touch1.pageX + touch2.pageX) / 2; lastY = (touch1.pageY + touch2.pageY) / 2; lastScale = this.scale; } }); box.addEventListener('touchmove', (event) => { const touches = event.touches; if (touches.length === 1 && !isMove) { const touch = touches[0]; const moveX = touch.pageX - start.x; const moveY = touch.pageY - start.y; box.style.transform = `translate3d(${moveX}px, ${moveY}px, 0) scale(${this.scale})`; } else if (touches.length === 2) { isMove = true; const touch1 = touches[0]; const touch2 = touches[1]; const x = (touch1.pageX + touch2.pageX) / 2; const y = (touch1.pageY + touch2.pageY) / 2; const deltaX = x - lastX; const deltaY = y - lastY; const scale = lastScale * Math.sqrt( (touch1.pageX - touch2.pageX) * (touch1.pageX - touch2.pageX) + (touch1.pageY - touch2.pageY) * (touch1.pageY - touch2.pageY) ) / Math.sqrt( (event.touches[0].pageX - event.touches[1].pageX) * (event.touches[0].pageX - event.touches[1].pageX) + (event.touches[0].pageY - event.touches[1].pageY) * (event.touches[0].pageY - event.touches[1].pageY) ); this.scale = scale; box.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0) scale(${scale})`; } }); box.addEventListener('touchend', () => { if (!isMove) { bindingx.create({ eventType: 'pan', selector: '._bindingx_box_', props: [ { element: 'transform.translateX', expression: 'x' }, { element: 'transform.translateY', expression: 'y' } ] }).interact(this.$refs.box, { startX: 0, startY: 0, touchAction: 'pan-y', animation: { duration: 1000 } }); } isMove = false; }); } }, data() { return { x: 0, y: 0, scale: 1 }; } }); export default { methods: { onClick() { console.log('click'); } } }; ``` 这样，就可以实现一个简单的拖动、缩放页面元素的功能了。注意，这里使用了 `bindingx` 插件来实现拖动动画效果，需要在 `touchend` 事件中检测拖动距离，如果没有拖动，则触发 `bindingx` 动画效果。