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 等最新技术来实现.而今天这里要分享的这款漂亮 ...
随机推荐
- docker 安装 RabbitMQ
1.镜像中国(http://www.docker-cn.com/registry-mirror):直接使用https://hub.docker.com下载镜像比较慢,使用镜像中国加速 使用例子:$ d ...
- 顺藤摸瓜:一个专黑建筑行业的QQ黏虫团伙现形记
QQ粘虫是已经流行多年的盗号木马,它会伪装QQ登陆界面,诱骗受害者在钓鱼窗口提交账号密码.近期,360QVM引擎团队发现一支专门攻击建筑行业人群的QQ粘虫变种,它伪装为招标文档,专门在一些建筑/房产行 ...
- 利用nodejs安装并运行express的三个坑
概述 这是我安装并运行express的三个坑,应该是比较常见的,在此记录一下. 内容 express不是内部或外部命令 输入命令:express -V 报错:'express' 不是内部或外部命令,也 ...
- 搭建docker环境准备
Docker平台的基本构成
- 实现instanceof关键字
如果用Java的伪代码来表现Java语言规范所描述的运行时语义,会是这样: // obj instanceof T boolean result; if (obj == null) { result ...
- django-pure-pagination实现分页
django-pure-paginations是一个第三方的分页插件 安装 django-pure-pagination pip install django-pure-pagination 在set ...
- Python爬虫——selenium模块
selenium模块介绍 selenium最初是一个测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览 ...
- Cannot determine embedded database driver class for database type NONE
springboot+jpa使用自定义配置文件连接数据库报错:Cannot determine embedded database driver class for database type NON ...
- [每天解决一问题系列 - 0012] 如何通过程序获取IIS站点信息
问题描述: 在WiX中需要判断某个站点是否存在,WiX没有这个能力,该怎么做呢? 解决方案: 解决方法就是写一个Custom Action来检测,实现的途径也有很多,现在想到了这么几个 1)Power ...
- 课程四(Convolutional Neural Networks),第二 周(Deep convolutional models: case studies) —— 0.Learning Goals
Learning Goals Understand multiple foundational papers of convolutional neural networks Analyze the ...