//菜单栏滑动
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. 从零开始的程序逆向之路基础篇 第二章——用OllyDbg(OD)分析一个简单的软件

    作者:Crazyman_Army 原文来自:https://bbs.ichunqiu.com/thread-43469-1-1.html 0x00知识回顾 (由于笔者省事,没开XP虚拟机,而且没关闭A ...

  2. 用react + redux + router写一个todo

    概述 最近学习redux,打算用redux + router写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 我只实现了Footer组件的router,其它组件的实现方法是类 ...

  3. 【Spark调优】Shuffle原理理解与参数调优

    [生产实践经验] 生产实践中的切身体会是:影响Spark性能的大BOSS就是shuffle,抓住并解决shuffle这个主要原因,事半功倍. [Shuffle原理学习笔记] 1.未经优化的HashSh ...

  4. Shell - 简明Shell入门

    本文以示例和注释的方式,对Shell编程的基本知识点进行了总结和回顾,所有脚本均已做了基本的调试和验证. Shell - 简明Shell入门 01 - 第一个脚本 脚本的定义.执行方法以及echo命令 ...

  5. 07-部署Flanneld网络

    部署Flanneld网络 Flanneld:用于解决容器之间网络互通,这里我们要配置TLS认证. Docker1.12.5:docker的安装很简单,这里也不说了. 配置Flanneld 这里我们使用 ...

  6. 14-02 Java Math类,Random类,System类,BigDecimal类

    Math类 Math的方法 package cn.itcast_01; /* * Math:用于数学运算的类. * 成员变量: * public static final double PI * pu ...

  7. Python内置类型(1)——真值测试

    python中任何对象都能直接进行真假值的测试,用于if或者while语句的条件判断,也可以做为布尔逻辑运算符的操作数 python中任何对象都能直接进行真假值的测试,而不需要额外的类型转换 这一点是 ...

  8. 一个关于margin-top的问题

    两个 此时内部div的样式为 当我把margin选中 如图所示: 我想要的效果是子div离父div有一个20px的间隙,但显然现在不是我想要的结果, 然后就开始查资料: 这个“问题”……它是CSS2. ...

  9. sql server 备份与恢复系列六 文件组备份与还原

    一. 概述 文件备份是指备份一个或多个文件或文件组中的所有数据.使用文件备份能够只还原损坏的文件,而不用还原数据库的其余部份,从而加快恢复速度.例如,如果数据库由位于不同磁盘上的若干文件组成,在其中一 ...

  10. Android Studio中设置一个按钮的不同点击触发事件

    my_day_model = (RelativeLayout) v.findViewById(R.id.my_day_model);my_day_pic = (ImageView) v.findVie ...