jquery制作移动端菜单栏左右滑动
//菜单栏滑动
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制作移动端菜单栏左右滑动的更多相关文章
- 【转载】jQuery手机移动端触屏日历日期选择
		文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ... 
- 制作移动端手机网站过程中的SEO优化方法技巧
		据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ... 
- JQuery制作网页——第五章  初识 jQuery
		1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ... 
- swiper 、css3制作移动端网站,折叠导航
		swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ... 
- jquery制作论坛或社交网站的每天打卡签到特效
		效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ... 
- 如何使用jQuery 制作全屏幕背景的嵌入视频
		实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ... 
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
		jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ... 
- 使用 CSS3 & jQuery 制作漂亮的书签动画
		今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ... 
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
		大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ... 
随机推荐
- Win32 CMD批处理命令
			1. win32批处理下,另开一个console执行进程X 使用start [/K|/C],示例: //------------------------------------------------ ... 
- consul初步学习
			简介 consul是一个服务发现框架 类似的还有zookeeper,eureka,etcd等 作用 服务发现(service discovery) 健康检查(health checking) 配置存储 ... 
- Tools - OpenSSL
			OpenSSL http://www.openssl.org/ OpenSSL is an open source project that provides a robust, commercial ... 
- 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”;Syntax error on token "Invalid Character";Server returned HTTP response code: 503 for URL;
			元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”:复制的代码有中文空格 Syntax error on token "Invalid Character&qu ... 
- Django--models--多表操作
			一 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的关 ... 
- 使用 Portainer UI 管理 Docker 主机
			Docker 使用命令行的方式来管理有时候并没有那么直观,可以使用 Portainer 的 UI 来管理 Docker 主机和 Docker Swarm 集群. 安装 Portainer 环境:cen ... 
- 《Kubernetes权威指南》——组件原理
			1 API Server 1.1 提供集群管理的API接口 API Server在kubernetes中的进程名为apiserver,运行在Master节点上 apiserver开放两个端口 本地端口 ... 
- 从零开始学 Web 之 BOM(三)offset,scroll,变速动画函数
			大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ... 
- Animate.css(一款有意思的CSS3动画库)
			官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ... 
- idea集成uglifyjs2
			项目中可能会多次修改某些*.js文件,但是引用的是*.min.js, 所以需要再改完源码后生成压缩的min.js uglifyjs是个不错的工具,但是单独用略显麻烦,如果能整合到idea就好了.正好i ... 
