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.他不需要加载 ...
随机推荐
- MVC4+EF 列表数据不能绑定
最新准备使用.net 的mvc+Ef来写个项目,开始一切顺利,到了数据绑定时出现了问题. 我的mvc视图引擎是Razor,后台提取数据的是Linq来处理,发现不管怎么样都不能绑定列表数据,可以将后台的 ...
- Java开发WebService(使用Java-WS)
前言: 初学Java,因为工作需要,直接跳到开发WebService.以前用.NET开发过WebService,对比一下,Java的WebService开发部署难度高了不止一个档次.网上的教程各式各异 ...
- 『JavaScript』模仿接口
JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...
- App测试基本流程详解
1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间. 1.3测试资 ...
- 孤荷凌寒自学python第七十六天开始写Python的第一个爬虫6
孤荷凌寒自学python第七十六天开始写Python的第一个爬虫6 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 不过由于对python-docx模 ...
- adb usage
使用安卓调试及自动化,不可避免的要使用adb,说明看起来很麻烦,进行简单记录,以便时候不时之需. usb连接手机调试就很简单了.首先,在手机端开启usb调试,即点击安卓版本项7次,就可以显示开发者菜单 ...
- CCS Font 知识整理总结
总是搞不懂 CCS 中如何正确的使用字体,这下明白了. 1.什么是 font-face font-face 顾名思义,就是文字的脸.字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书. ...
- BZOJ 3809 Gty的二逼妹子序列 莫队算法+分块
Description Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了一个难题. 对于一段妹子们,他们想让你帮忙求出这之内美丽度∈[a,b]的妹子的美丽度的种类数. 为了方便,我们 ...
- linux 命令小结(随时更新)
代码备份命令: tar cvf 备份文件名 要备份的目录名 查看Linux服务器内存使用情况: 1.free命令 free -m [root@localhost ~]# free -m ...
- Python如何进行中文注释
最近,由于实习工作的需要,开始接触Python,但是第一个大的脚本写下来之后,连中文注释都没办法加,很郁闷,遂在网上找解决办法,在Python 官网上看到这个页面:http://www.python. ...