js实现页面触摸滑动
先设置一个div 高度不能设置100% 。
window.addEventListener("load",function(){
var addEventListener = 'addEventListener';
var elems = document.getElementsByClassName('dragscroll');
for(var i = ;i<elems.lenth;){
(function(elem,lastClientX,lastClientY,pushed){
elem.addEventListner('mousedown',function(e){
pushed=;
lastClientX = e.eclientX;
lastClientY = e.clientY;
e.preventDefault();
e,stopPropagation();
},)
elemetn.addEventListener('mousemove',function(e){
if(pushed&&pushed==){
elem.scrollLeft -=(- lastClientX +(lastClientX=e.clientX));
elem.scrollTop -=(-lastClientY+(lastClientY=e.clientY));
}
},)
elem.addEventListener('mouseup',function(){
pushed=;
},)
})(elemes[i++]);
}
},)
js实现页面触摸滑动的更多相关文章
- swiper.js 移动端触摸滑动插件
API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- JS移动客户端--触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
随机推荐
- ubuntu配置机器学习环境(三) opencv 安装
这里使用脚本安装 一些教程里使用cmake 安装,很容易出错的 使用github上的安装脚本,自动化安装 参考链接 Ubuntu $ cd Ubuntu/2.4 $ chmod +x * # 如果要安 ...
- C#中Equals和= =(等于号)的比较)(转载)
C#中Equals和= =(等于号)的比较) 相信很多人都搞不清Equals和 = =的区别,只是零星的懂一点,现在就让我带大家来进行一些剖析 一. 值类型的比较 对于值类型来说 ...
- Uber CEO博鳌论坛采访:看好中国市场共享经济的发展模式
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- JavaScript---设计模式简介
概念 设计模式(Design pattern)是一套被反复使用.思想成熟.经过分类和无数次实战设计经验的总结的.使用设计模式是为了让系统代码可重用.可扩展.可解耦.更容易被人理解且能保证代码的可靠性. ...
- "Cannot open source file "Wire.h" " in Arduino Development
0. Environment Windows 8 x64 Arduino 1.0.5 Visual studio 2012 Visual micro Arduino 1. Steps Add &quo ...
- thrift安装
yum -y install gcc-c++ autoconf automake sysconftool boost boost-devel libtool perl-ExtUtils-MakeMak ...
- android开源项目之OTTO事件总线(二)官方demo解说
官方demo见 https://github.com/square/otto 注意自己该编译版本为2.3以上,默认的1.6不支持match_parent属性,导致布局文件出错. 另外需要手动添加an ...
- Flexbox布局模式的理解
个人博客地址: 雨中的鱼-前端知识分享 http://www.showhtml5.cc 分享干货,有兴趣的人可以一起来分享前端知识 加Q群:440279380 Flexbox,一种C ...
- php用GD库给图片添加水印
php用GD库给图片添加文字水印,整个代码比较简单,DEMO如下: <?php /*打开图片*/ //1.配置图片路径 $src = "aeroplane.jpg"; //2 ...
- 怎么在windows10中关闭Windows Defender?
通过修改注册表,永久禁用Windows Defender 打开注册表编辑器. 按 Win +R键入regedit,点击确定. 定位需要修改的注册表 其路径如下 HKEY_LOCAL_MACHIN ...