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.他不需要加载 ...
随机推荐
- Spring MVC怎么统一异常管理?
1. 在类上加上@ControllerAdvice注解 2. 在方法上加上@ExceptionHandler注解 @ExceptionHandler(Exception.class) @Respons ...
- 洛谷P1364 医院设置
LITTLESUN的第一道图论,撒花~~ 题目链接 这道题是Floyd的板子题 注意对于矩阵图的初始值赋值要全部赋值成最大值 十六进制的最大值表示方式是0x3f3f3f3f memset(G,0x3f ...
- 复制MySQL数据库A到另外一个MySQL数据库B(仅仅针对innodb数据库引擎)
方案一:(不用太大的变化my.ini文件) copy 原数据库A中的 数据库(database) ib_logfile1 ib_logfile0 ibdata1: 关闭目的数据库B: 备份 ...
- cordova 框架下开发app推送
cordova提供官方的push pluging,使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用.所以选择国内的第三方插件. 可供选择的有百度云推送,腾讯云信鸽,极光 ...
- MinGW安装图文教程以及如何配置C语音编程环境
MinGW安装图文教程以及如何配置C语音编程环境 转载自:http://www.jb51.net/softjc/192017.html MinGW 是一组包含文件和端口库,其功能是允许控制台模式的程序 ...
- spring 读取properties文件--通过注解方式
问题: 需要通过properties读取页面的所需楼盘的名称.为了以后便于修改. 解决: 可以通过spring的 PropertiesFactoryBean 读取properties属性,就不需要自己 ...
- centos7源码安装cloud-init
<template> <name>centos72-source</name> <os> <name>CentOS-7</name&g ...
- LINQ学习笔记——(1)添加扩展方法
目的: 对已存在类型的行为进行扩展 注意事项: 扩展方法是一种特殊的静态方法 扩展方法必须在静态类中定义 扩展方法的优先级低于同名的类方法 扩展方法只在特定的命名空间内有效 ...
- POJ 2082 Terrible Sets(栈)
Description Let N be the set of all natural numbers {0 , 1 , 2 , . . . }, and R be the set of all re ...
- LCA(最近公共祖先)——LCA倍增法
一.前人种树 博客:最近公共祖先 LCA 倍增法 博客:浅谈倍增法求LCA 二.沙场练兵 题目:POJ 1330 Nearest Common Ancestors 代码: const int MAXN ...