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 等最新技术来实现.而今天这里要分享的这款漂亮 ...
随机推荐
- 项目Alpha冲刺(团队2/10)
项目Alpha冲刺(团队2/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...
- jdk8新特性(详解)
最近在复习外加看点面试题,jdk8的新特性虽然在项目用用到过一两个,准备系统的了解一下jdk8的常用新特性 一:Lambd表达式 也可称为闭包 引入函数式编程到Java中 为了使现有函 ...
- Android开发工程师文集-Android知识点讲解
前言 大家好,给大家带来Android开发工程师文集-Android知识点讲解的概述,希望你们喜欢 WebView讲解 一般通过Intent调用系统的浏览器: Uri uri = Uri.parse( ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python中使用双端队列解决回文问题
双端队列:英文名字:deque (全名double-ended queue)是一种具有队列和栈性质的抽象数据类型. 双端队列中的元素可以从两端弹出,插入和删除操作限定在队列的两边进行. 双端队列可以在 ...
- Data - 关于大数据
历史与趋势 大数据的前世今生:诞生.发展.未来? 如何利用数据赚钱?大数据价值变现的10种商业模式及利弊分析 10大行业大数据应用痛点及解决策略 大数据凉了?不,流式计算浪潮才刚刚开始 概念与定义 关 ...
- 2 jquery选择器
一基本选择器 #id .class elment * select1, select2, select3... 例 $("span, #two").css("bac ...
- 如何开始DDD(续)
上一篇针对用户注册案例简单介绍了如何使用 DDD,接下来我将继续针对这个例子做一下补充.先将User模型丰富起来,因为目前看上去他和贫血模型还没有啥大的区别. 首先还是由领域专家来说明业务,他提出了用 ...
- Asp.Net Core微信服务中间件-.NetCore2.1
又封周末,闲暇无聊,随手写了一个关于微信公众号服务的中间件,基于.NetCore2.1.服务类库采用.Net Standard2.0,兼容.net 4.6.1. 整体思路是,设计一个中间件,提供微信消 ...
- SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能
It's like JSON.but fast and small. MessagePack is an efficient binary serialization format. It lets ...