//菜单栏滑动
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. CGI 和 FastCGI 协议的运行原理

    目录 介绍 深入CGI协议 CGI的运行原理 CGI协议的缺陷 深入FastCGI协议 FastCGI协议运行原理 为什么是 FastCGI 而非 CGI 协议 CGI 与 FastCGI 架构 再看 ...

  2. Testing - 软件测试知识梳理 - 相关词汇

    测试策略 描述测试工程的总体方法和目标:根据测试需求,描述在什么测试阶,依据什么测试要素和目标,进行什么种类的测试,使用什么样的测试方法和工具. 测试策略的制定主要包含如下内容: 确定测试过程要使用的 ...

  3. vueAdmin ui基础包

    这个版本的vueAdmin ui是针对官网版本进行修改而成,主要修改了后端接口修改,登录等等,一个通用的前端工程基础包,即开即用,省去了前期繁琐配置 Demo Build Setup # Clone ...

  4. VS发布 错误 未能将文件 复制到

    在VS内部编译及试运行的时候并为出现错误一切正常 当将项目发布时提示XXX文件无法复制到对应的obj文件夹下 未能将文件 upfile\team\2013\0328\20130328112637296 ...

  5. [EXP]Memu Play 6.0.7 - Privilege Escalation

    # Exploit Title: Memu Play - Privilege Escalation (PoC) # Date: // # Author: Alejandra Sánchez # Ven ...

  6. kafka+elk

    安装elasticsearch 下载:http://www.elastic.co/downloads/elasticsearch 下载后解压 修改配置文件,xxx是自定义目录 vi elasticse ...

  7. Android生成二维码--拍照或从相册选取图片

    拍照或从相册选择图片是我们日常开发中经常使用到的,可以说是必须掌握的东西.上一篇我介绍了如何生成自定义二维码<Android生成自定义二维码>,其中logo和代替黑色色块的图片都是写死的, ...

  8. AutoCAD 凸度(bulge)的概念及使用WPF函数画图

    前言  凸度(bulge)是AutoCAD 中一个非常重要的概念,凸度控制着两点之间弧度大小,弧度的方向.各种复杂的图像有可能就是成百上千的弧线组成的.从AutoCAD中导出的数据也有该值,一般的形式 ...

  9. PXE | 开关机

    PXE | 开关机流程 linuxPXE 主要阶段 引导的主要6个阶段 从MBR中读取引导加载程序boot loader 加载并初始化内核: 检测和配置设备: 创建内核进程: 系统管理员干预(单用户模 ...

  10. Linux-485收发切换延迟的解决方法

    [前言] 本文引用各种资料甚多,而引用出处标明并不详细,若有侵权,请联系删除. 转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10381616.html ...