滑动.clientX

js Touch事件（向左滑动，后退）

js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev){ if(ev.touches.length==1){ switch(ev.type){ case 'touchstart': if(console) console.log('Touch start('+ev.touches[0].clientX+', '+ev.touches[0].client

js做通讯录的索引滑动显示效果和滑动显示锚点效果

只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可. 这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知.可以去试下. index为索引div

h5滑动方向、手机拖动层

做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需求修改代码.) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>手机端触屏手指滑动方向及拖动层</title> <meta content=

jQuery中 pageX,clientX,offsetX,layerX的区别

一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0)坐标绝对定位clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化.可以理解为:相对可视化左上角坐标绝对定位如图:(小黑点为点击坐标) 二.screenXscreenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发

JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个

HTML5滑动（swipe）事件

移动H5开发中经常用到滑动效果(页面上移.下移.向左滑动.向右滑动等),浏览器并没有内置swipe事件,可以通过touch事件(touchstart.touchmove和touchend)模拟swipe效果.jQuery mobile和zeptojs提供了swipe事件.jquery mobile只有swipeLeft和swipeRight,zeptojs提供了完整的tap和swipe事件. /** * @author accountwcx@qq.com * http://git.oschina

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取

iScroll4.2.5中的无法滑动或点击的解决方案（转）

又见iScroll问题,特别是三星手机和iPhone,顺便提一句,现在的项目中他们给div加了height属性来解决不能滚动问题,个人认为是个非常愚蠢的解决方案,我必须使用media query来解决随之而来的不同手机有不同高度问题,既不能适应所有手机,万一将来有了新手机型号,也会发生问题.不过他们是公司专门雇佣的顾问和专家,我也没辙. 转载自: http://www.websqq.org/archives/1524,原文如下 iScroll(注4.2.5版本)框架在部分三星手机上无法滑动或点击

JS案例之5——移动端触屏滑动

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个

php 滑动验证码

自己研究: jQuery拖拽滑动验证码插件 slideunlock.js 原理:(别人说) 响应时间,拖拽速度,时间,位置,轨迹,重试次数等.这些因素能够构成一个采样结果或者辨识特性. 只获取到滑动时间,滑动的长度. 效果: html页面 <link href="css/slide-unlock.css" rel="stylesheet"> <script type="text/javascript" src="js/

js实现touch移动触屏滑动事件

在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类似的对象).这个对象封装一次屏幕触摸,一般来自于手指.它在touch事件触发的时候产生,可以通过touch event handler的event对象取到移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理t

pageX, clientX ,screenX, offsetX, layerX, ,x的区别

事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY+scrollTop,参考点是页面 2. clientX ,clientY: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. 这是一个变化的,是以浏览器左上角为参考点 3. screenX, screenY : 鼠标相对

pageX,clientX,offsetX,layerX的区别

pageX,clientX,offsetX,layerX的区别在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_<John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀.一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化c

js实现滑动解锁功能（PC+Moblie）

http://dummyimage.com/600x400/ http://placehold.it/140x70 实现效果: css样式代码略. html代码: 页面上导入了jquery.mobile .jquery <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/l

JS封装移动端触摸滑动插件应用于导航banner【精装版】

自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, childN, goli,lisname} ); mrChenSwipe({ parent : 父盒子 [父盒子的高度会继承父级] , 必填 child : 子盒子 [ul,子盒子需要用ul>li>a], 必填 type : 滑动方向 [vertical || level], 必

html .css 实现图片滑动和自动播放特效移动端 HTML 5中添加了以touch 开头的事件

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <title>后盾网视频教程之滑动轮

移动端touch事件获取clientX, clientY

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend. 如何获取手指滑动时的坐标位置呢? 直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好, 如果是jquery的event对象,使用event.originalEvent.changedTouches[

移动端touch触屏滑动事件、滑动触屏事件监听！

一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规

pageX,clientX,offsetX,layerX的那些事

在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀. 一.PageX和clientX PageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域

滑动.clientX

热门专题