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.他不需要加载 ...
随机推荐
- 003---socket介绍
socket介绍 什么是socket? socket是应用层与tcp/ip协议族通信的中间软件抽象层,它是一组接口.在设计模式中.其实就是一个门面模式.我们无需深入理解tcp/udp协议,socket ...
- Python | 用Pyinstaller打包发布exe应用
参考:https://jingyan.baidu.com/article/a378c960b47034b3282830bb.html https://ask.csdn.net/questions/72 ...
- 【Leetcode】804. Unique Morse Code Words
Unique Morse Code Words Description International Morse Code defines a standard encoding where each ...
- LeetCode算法1—— 两数之和
给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], target ...
- 50-Identity MVC:DbContextSeed初始化
1-创建一个可以启动时如果没有一个账号刚创建1个新的账号 namespace MvcCookieAuthSample.Data { public class ApplicationDbContextS ...
- ABAP CDS ON HANA-(4)ヘッダー行編集
Explicit Name List use in CDS We create a simple CDS View like below. @AbapCatalog.sqlViewName: ‘ZS ...
- Returning Values from Bash Functions
转自:https://www.linuxjournal.com/content/return-values-bash-functions Bash functions, unlike function ...
- 玩玩自动化测试之selenium篇
现如今社会科技发展太快了,纯功能点点点已经落后别人好几条街了,所以为了让自己多点职业生涯年限,得挺起肩,傲起头.自动化测试,其本质是用代码程序测试程序,所以其实第一步应该学好编程语言,后再自己开发自动 ...
- Django打造大型企业官网
第1章 Django预热 1-为什么需要虚拟环境 2-virtualenv创建虚拟环境 3-virtualenvwrapper使用 4-URL组成部分讲解 5-课程准备工作 6-Django介绍 第2 ...
- [USACO18DEC]Fine Dining
题面 \(Solution:\) 一开始想的是先跑一遍最短路,然后拆点之后再跑一遍,比较两次dis,然后发现拆点后会有负环(可能是我没想对拆点的方法),于是就放弃了拆点法. 我们考虑强制让每头牛选择走 ...