百度touch.js API教程

百度touch.js API教程_第1张图片

下载:http://download.csdn.net/detail/cometwo/9407914

<!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>

你可能感兴趣的:(api,百度,IE,touch-js)