当前位置：网站首页>百度touch.js
百度touch.js
2022-07-21 11:52:00 【jiojio在学习勒】
<!DOCTYPE html> <html> <head> <link href="img/favicon.ico" rel="shortcut icon" type="images/x-icon"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport"> <meta name="apple-touch-fullscreen" content="YES"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <title>百度touch.js API教程[UC浏览器测试通过]</title> <script type="text/javascript" src="js/touch.min.js"></script> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/hijs.js"></script> <style type="text/css"> *, html, body { padding: 0px; margin: 0px; left: 0px; top: 0px; } #main { padding: 5px; } #play { background: black; width: 100%; height: 800px; border: 1px solid red; position: relative; overflow: hidden; } img { position: absolute; width: 200px; height: 200px; display: block; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; border-radius: 50%; border: 1px solid red; } img:hover { cursor: pointer; } .div1 { margin-top: 10px; width: 100%; height: 50px; color: blue; font-size: 25px; line-height: 50px; background: green; text-align: center; } </style> <script type="text/javascript"> /*******************************旋转程序****************************************/ /* $(function() { //旋转程序 // runhijs(); //官方程序不知为什么要加，貌似不加也可以 var angle = 0; touch.on('#target', 'touchstart', function(ev) { ev.startRotate(); ev.preventDefault(); }); touch.on('#target', 'rotate', function(ev) { var totalAngle = angle + ev.rotation; if (ev.fingerStatus === 'end') { //这一句很重要 angle = angle + ev.rotation; $('.div1').text("本次旋转角度为:" + ev.rotation + "度, 方向:" + ev.direction + "."); } this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)'; }); }); */ /*******************************放大缩小****************************************/ // $(function() { //放大缩小 // 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 > 5 ? 5 : currentScale; //自己调节可以放大的最大倍数 // currentScale = currentScale < 0.1 ? 0.1 : currentScale; //自己调节可以缩小的最小倍数 // this.style.webkitTransform = 'scale(' + currentScale + ')'; // $('.div1').text("当前缩放比例为:" + currentScale + "倍."); // }); // touch.on('#target', 'pinchend', function(ev) { // initialScale = currentScale; // }); // }); /*******************************识别tap[单击], doubletap[双击]和hold[长按]事件****************************************/ // $(function() { //识别tap[单击], doubletap[双击]和hold[长按]事件 // $('.div1').text("识别tap[单击], doubletap[双击]和hold[长按]事件."); // // touch.on('#target', 'touchstart', function(ev){ // // ev.preventDefault(); // // }); // touch.on('#target', 'hold tap doubletap', function(ev) { // $('.div1').text("当前事件为: " + ev.type); // var _this = this; // this.classList.add("bounce"); // touch.on(this, "webkitAnimationEnd", function() { // _this.classList.remove("bounce"); // }); // }); // }); /*******************************向左向右滑动****************************************/ // $(function() { // var w = 205; // var tw = play.offsetWidth; // var lf = document.getElementById("target").offsetLeft; // var rt = tw - w - lf; // $('.div1').text("向左, 向右swipe滑动"); // touch.on('#target', 'touchstart', function(ev) { // ev.preventDefault(); // }); // var target = document.getElementById("target"); // target.style.webkitTransition = 'all ease 0.2s'; // touch.on(target, 'swiperight', function(ev) { // this.style.webkitTransform = "translate3d(" + rt + "px,0,0)"; // $('.div1').text("向右滑动."); // }); // touch.on(target, 'swipeleft', function(ev) { // $('.div1').text("向左滑动."); // this.style.webkitTransform = "translate3d(-" + this.offsetLeft + "px,0,0)"; // }); // }); /*******************************抓取并拖拽目标元素****************************************/ $(function() { $('.div1').text("抓取并拖拽目标元素"); touch.on('#target', 'touchstart', function(ev) { ev.preventDefault(); }); var target = document.getElementById("target"); var dx, dy; touch.on('#target', 'drag', function(ev) { dx = dx || 0; dy = dy || 0; var offx = dx + ev.x + "px"; var offy = dy + ev.y + "px"; this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)"; }); touch.on('#target', 'dragend', function(ev) { dx += ev.x; dy += ev.y; $('.div1').text("当前x值为:" + dx + ", 当前y值为:" + dy + "."); }); }); /*******************************抓取并拖拽目标元素****************************************/ // $(function() { // $('.div1').text("识别原生事件"); // touch.on('#target', 'touchstart', function(ev) { // ev.preventDefault(); // }); // touch.on('#target', 'touchstart touchmove touchend', function(ev) { // var _this = this; // if (!this.classList.contains("bounce")) { // if (ev.type === "mousedown" || ev.type === "touchstart") { // this.classList.add("bounce"); // touch.on(this, "webkitAnimationEnd", function() { // _this.classList.remove("bounce"); // }); // } // } // $('.div1').text("当前为原生事件: " + ev.type); // }); // }); </script> </head> <body> <div id="main"> <h1 style="color: red;text-align: center;">使用哪个只需要打开相应的注释即可</h1> <div id="play"> <img id="target" draggable="false" src="img/cloud.png" /> </div> <div class="div1">"touch.js demo记录每一次操作"</div> </div> </body> </html>
边栏推荐
猜你喜欢
下载工具-谷歌插件 tampermonkey 和 greasyfork
When uploading jars on the nexus management page, jars can be pulled to the project normally. Jars published using the deploy of idea lifecycle can only be pulled to POM. 401 problem
情人节礼物------用她的照片和我们的聊天记录生成词云~
Binary search tree and bidirectional linked list
epoch，batch_size
![Vite package reported an error [rollup plugin dynamic import variables] unexpected token. It turned out that it was because of console log](/img/0b/39b15eba0ad987ee794308c19c6c44.png)
Vite package reported an error [rollup plugin dynamic import variables] unexpected token. It turned out that it was because of console log
Welcome to the CSDN markdown editor template
Installation and use of yarn
![[comprehensive pen test] difficulty 3.5/5, multi solution popular binary tree pen test](/img/f2/1fbb71d6f67fe4fd585c1a363591a5.png)
[comprehensive pen test] difficulty 3.5/5, multi solution popular binary tree pen test
医学细胞图像分割
随机推荐
当神经网络的模型还不如决策树的效果好
Welcome to the CSDN markdown editor template
欢迎使用CSDN-markdown编辑器模板
Reentrant read write lock feature summary of reentrantreadwritelock
一些扣脑壳
Musk claims to be on the brain. Is it science or deception?
VAD simple summary
web服务器
（已解决）针对CameraDS中，hr = m_pGraph-＆gt;Connect(m_pCameraOutput, m_pGrabberInput);执行失败的解决办法
面试官：请你实现一下map / filter / reduce | 数据基础方法的模块化实现
7.字符编码？
ionic4 学习笔记1
ArgoCD 用户管理、RBAC 控制、命令行登录、App 同步
unknown host问题解决办法
基于ABP实现DDD--领域服务、应用服务和DTO实践
influxdb
16.target和currenTarget的区别？
省市区联动数据
Instant retail Three Kingdoms kill: meituan replenishment, Alibaba collaboration, jd.com drainage
Implementing DDD based on ABP -- domain service, application service and dto practice