web移动端触摸滑动事件_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

web移动端触摸滑动事件_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

web移动端触摸事件的范例~~~

注意：1.如果不是内联元素，获取style的属性值前需先赋值~不然为Null.

2.亲测andriod 手机 MX4内置浏览器运行妥妥的~~但是微信浏览器并不支持~原因未找到。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5     <title>web移动端触摸滑动事件</title> 6     <meta name="description" content="web移动端触摸滑动事件"/> 7     <meta name="viewport" content="user-scalable=no"> 8 </head> 9 <body>10 <div style="position:relative;left:10px;top:10px;height: 100px;width: 200px;background: blue;" id="slider"></div>11 <script>12     var slider = {13         //判断设备是否支持touch事件14         touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,15         slider: document.getElementById('slider'),16         //事件17         events: {18             slider: this.slider,     //this为slider对象19             handleEvent: function (event) {20                 var self = this;     //this指events对象21                 if (event.type == 'touchstart') {22                     self.start(event);23                 } else if (event.type == 'touchmove') {24                     self.move(event);25                 } else if (event.type == 'touchend') {26                     self.end(event);27                 }28             },29             //touchstart30             start: function (event) {31                 event.preventDefault();                 //阻止浏览器的默认事件32                 var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch33                 startPos = {x: touch.clientX, y: touch.clientY};    //取第一个touch的坐标值34                 sliderX = parseInt(this.slider.style.left);            //获取触摸时滑动块的初始位置35                 sliderY = parseInt(this.slider.style.top);36                 this.slider.addEventListener('touchmove', this, false);37                 this.slider.addEventListener('touchend', this, false);38             },39             //touchmove40             move: function (event) {41                 //当屏幕有多个touch或者页面被缩放过，就不执行move操作42                 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;43                 var touch = event.targetTouches[0];44                 endPos = {x: touch.clientX - startPos.x, y: touch.clientY - startPos.y};                 //获取所移动的距离45                 event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏46                 this.slider.style.left = (sliderX + endPos.x ) + 'px';47                 this.slider.style.top = (sliderY + endPos.y) + 'px';48 49             },50             //滑动释放51             end: function (event) {52                 //解绑事件53                 this.slider.removeEventListener('touchmove', this, false);54                 this.slider.removeEventListener('touchend', this, false);55             }56         },57 58         //初始化59         init: function () {60             var self = this;     //this指slider对象61             if (!!self.touch) self.slider.addEventListener('touchstart', self.events, false);    //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性62         }63     };64     slider.init();65 </script>66 </body>67 </html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。