//菜单栏滑动
function move_scollX(){
var startPosition, endPosition, distanceX,distanceY;
$(".left").bind('touchstart', function(e){ 
  var touch = e.originalEvent.changedTouches[0]; //移动端
  startPosition = {
    x: touch.pageX,
    y:touch.pageY
  }
}) .bind('touchmove', function(e){

  var touch = e.originalEvent.changedTouches[0]; //移动端
  endPosition = {
    x: touch.pageX,

    y:touch.pageY

};

distanceX = endPosition.x - startPosition.x;

distanceY = endPosition.Y - startPosition.Y; 
if(distanceX < 0) { // 向左移动
  $(this).css({"left":distanceX});
} else if (distanceX > 0) { // 向右移动
  $(this).css({"left":distance});
}
}
}
}).bind('touchend', function(e){ //放开事件
  $(this).animate({"left":-width},100);
}
});
}

jquery制作移动端菜单栏左右滑动的更多相关文章

  1. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

  2. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  3. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  4. swiper 、css3制作移动端网站,折叠导航

    swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...

  5. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  6. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  7. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  8. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  9. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

随机推荐

  1. 基于DobboX的SOA服务集群搭建

    本人第一次发博客,有什么不对的地方希望各位批评指正,我就不把文章copy过来了,直接上有道笔记的链接,希望各位喜欢. 第一部分: 准备工作 第二部分: dubbox的安装和使用 第三部分: RESTf ...

  2. 使用docker redis-cluster集群搭建

    参考https://www.cnblogs.com/cxbhakim/p/9151720.html此文 主要搭建过程参考上文,此处讲下主要过程和遇到的坑 首先是镜像的基础搭建,我不知道是否是作者编写时 ...

  3. bootstrap fileinput 使用记录

    第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...

  4. Unicode 字符串排序规则(二):如何比较字符串

    一.UCA 简介 Unicode Collation Algorithm (UCA) 是 Unicode 规定的如何比较两个字符串大小的算法,也是事实上的标准.我们先来看下它的几个特征. 1.1 Mu ...

  5. Ubuntu 16.04 安装 arm-linux-gcc 交叉编译工具

    工作需要,最近在编译linux嵌入式内核时,需要安装arm-linux-gcc交叉编译,实际上,安装这个交叉编译器的难度没啥.不过,这里有些问题还是值得我去思考和记录下来的. 这个系统的上的编译器用的 ...

  6. 今天是JVM的生日,来了解下JVM的发展历史吧

    1991年4月,由James Gosling主导的团队创造了Oak语言,java的前身,1995年5月23号,Oak语言更名Java,并且提出那句注明的:”write Once,Run Anywher ...

  7. 一些java多线程的经验

    多线程的时候,可以try--catch后再catch中加continue让程序继续运行(当然,前提是这个异常的数据不影响后续的操作)

  8. logstash grok 内置正则

    参考地址:https://github.com/elastic/logstash/blob/v1.4.2/patterns/grok-patterns USERNAME [a-zA-Z0-9._-]+ ...

  9. 在Kubernetes中部署GlusterFS+Heketi

    目录 简介 Gluster-Kubernetes 部署 环境准备 下载相关文件 部署glusterfs 部署heketi server端 配置heketi client 简介 在上一篇<独立部署 ...

  10. Neo4j使用Cypher查询图形数据

    Neo4j使用Cypher查询图形数据,Cypher是描述性的图形查询语言,语法简单,功能强大,由于Neo4j在图形数据库家族中处于绝对领先的地位,拥有众多的用户基数,使得Cypher成为图形查询语言 ...