当前位置：网站首页>Baidu touch.js
Baidu touch.js
2022-07-24 18:08:00 【Jiojio is learning le】
<!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> Baidu touch.js API course [UC Browser test passed ]</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"> /******************************* Rotation program ****************************************/ /* $(function() { // Rotation program // runhijs(); // I don't know why the official program should add , It seems that it's OK not to add 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') { // This sentence is very important angle = angle + ev.rotation; $('.div1').text(" This rotation angle is :" + ev.rotation + " degree , Direction :" + ev.direction + "."); } this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)'; }); }); */ /******************************* Zoom in and out ****************************************/ // $(function() { // Zoom in and out // 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; // Adjust the maximum magnification by yourself // currentScale = currentScale < 0.1 ? 0.1 : currentScale; // Adjust the minimum multiple that can be reduced by yourself // this.style.webkitTransform = 'scale(' + currentScale + ')'; // $('.div1').text(" The current zoom ratio is :" + currentScale + " times ."); // }); // touch.on('#target', 'pinchend', function(ev) { // initialScale = currentScale; // }); // }); /******************************* distinguish tap[ single click ], doubletap[ double-click ] and hold[ Long press ] event ****************************************/ // $(function() { // distinguish tap[ single click ], doubletap[ double-click ] and hold[ Long press ] event // $('.div1').text(" distinguish tap[ single click ], doubletap[ double-click ] and hold[ Long press ] event ."); // // touch.on('#target', 'touchstart', function(ev){ // // ev.preventDefault(); // // }); // touch.on('#target', 'hold tap doubletap', function(ev) { // $('.div1').text(" Current event is : " + ev.type); // var _this = this; // this.classList.add("bounce"); // touch.on(this, "webkitAnimationEnd", function() { // _this.classList.remove("bounce"); // }); // }); // }); /******************************* Slide left and right ****************************************/ // $(function() { // var w = 205; // var tw = play.offsetWidth; // var lf = document.getElementById("target").offsetLeft; // var rt = tw - w - lf; // $('.div1').text(" towards the left , towards the right swipe slide "); // 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(" Slide to the right ."); // }); // touch.on(target, 'swipeleft', function(ev) { // $('.div1').text(" Scroll left ."); // this.style.webkitTransform = "translate3d(-" + this.offsetLeft + "px,0,0)"; // }); // }); /******************************* Grab and drag the target element ****************************************/ $(function() { $('.div1').text(" Grab and drag the target element "); 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(" At present x The value is :" + dx + ", At present y The value is :" + dy + "."); }); }); /******************************* Grab and drag the target element ****************************************/ // $(function() { // $('.div1').text(" Identify native events "); // 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(" It is currently a native event : " + ev.type); // }); // }); </script> </head> <body> <div id="main"> <h1 style="color: red;text-align: center;"> To use which one, just open the corresponding comment </h1> <div id="play"> <img id="target" draggable="false" src="img/cloud.png" /> </div> <div class="div1">"touch.js demo Record every operation "</div> </div> </body> </html>
边栏推荐
猜你喜欢
0625~＜config＞-＜bus＞
Inherit, override, overload
Pay close attention! List of the latest agenda of 2022 open atom open source Summit
SSM framework learning
获取同程（艺龙）酒店数据
Bib | mol2context vec: context aware deep network model learning molecular representation for drug discovery
es（1）
T245982 "kdoi-01" drunken flower Yin
Section 7 Data Dictionary: hash followed by Daewoo redis ------- directory post
Common methods of number and math classes
随机推荐
How does win11 enhance the microphone? Win11 enhanced microphone settings
Go to bed capacity exchange
How to read "STL source code analysis"?
Goodbye Navicat! This open source database management tool has a cooler interface!
Ship new idea 2022.2 was officially released, and the new features are really fragrant!
猜JWT关键字
Shardingsphere database read / write separation
Interview assault 66: what is the difference between request forwarding and request redirection?
C language custom type explanation - Consortium
0625~＜config＞-＜bus＞
Stream, file, IO
Alibaba /166 obtains the API instructions for all products in the store
移动端实现0.5px的实用方案
undefined reference to H5PTopen
如何遵循“低耦合”设计原则？
仅需一个依赖给Swagger换上新皮肤，既简单又炫酷！
Mozilla foundation released 2022 Internet health report: AI will contribute 15.7 trillion yuan to the global economy in 2030, and the investment in AI in the United States last year was nearly three t
Use prometheus+grafana to monitor MySQL performance indicators
Shanghai Jiaotong University team used joint deep learning to optimize metabonomics research
0615～用自定义注解实现RBAC权限管理