先设置一个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实现页面触摸滑动的更多相关文章

  1. swiper.js 移动端触摸滑动插件

    API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...

  2. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  3. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  4. 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

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

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

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

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  8. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  9. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

随机推荐

  1. html中显示指数、底数

    在web前端开发中,经常要显示指数.底数,比如x2,loga,我们可以使用span标签,通过控制标签内字体大小,对齐方式来实现想要的效果.代码如下 <table> <tr> & ...

  2. spfa专题

    SPFA专题 1通往奥格瑞玛的道路 在艾泽拉斯,有n个城市.编号为1,2,3,...,n. 城市之间有m条双向的公路,连接着两个城市,从某个城市到另一个城市,会遭到联盟的攻击,进而损失一定的血量. 每 ...

  3. 20145202马超《JAVA》预备作业1

    20145202马超<JAVA>预备作业1 你觉得自己专业吗?对专业的期望是什么? 我觉得自己很不专业,我对专业的期望:老师之前讲过德国的一个研究,学习分为5个档次,第三个档是能够自己发现 ...

  4. 为WPF中DropShadowBitmapEffect提供轻量级的替代品

    原文:为WPF中DropShadowBitmapEffect提供轻量级的替代品 为WPF中DropShadowBitmapEffect提供轻量级的替代品                         ...

  5. 15 GIL 全局解释器锁 C语言解决 top ps

    1.GIL 全局解释器锁:保证同一时刻只有一个线程在运行. 什么是全局解释器锁GIL(Global Interpreter Lock) Python代码的执行由Python 虚拟机(也叫解释器主循环, ...

  6. [转]URL传中文参数导致乱码的解决方案之encodeURI

    通过URL传中文参数时,在服务端后台获取到的值往往会出现乱码.解决方案有很多种.本文介绍如何通过encodeURI来解决中文乱码问题. 首先,在前端页面准备参数的时候,需要对中文参数进行encode处 ...

  7. Django源码分析之执行入口

    魔法门 一般我们启动django,最简单的方法是进入project 目录,这时目录结构是这样的 然后我们执行python manage.py runserver,程序就开始执行了. 那django是如 ...

  8. chm文件空白如何解决

    解决办法:http://jingyan.baidu.com/article/8275fc86b5fb6646a03cf6b0.html

  9. SSH答疑解惑系列(三)——Struts2的异常处理

    Struts2的异常采用声明式异常捕捉,具体通过拦截器来实现. 在项目中,我们可以在Action中直接抛出异常,剩下的就交给Struts2的拦截器来处理了.当然,我们需要进行相关配置. Struts2 ...

  10. new String(str.getBytes(“gbk”),“gbk”)的用法详解

    new String(str.getBytes(“gbk”),“gbk”)的用法详解 前提是str存放的是汉字 一.如果是new String(str.getBytes(“gbk”),“gbk”)时, ...