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);
}
});
}

时间: 2024-08-26 10:14:49

jquery制作移动端菜单栏左右滑动的相关文章

jquery制作滑动面板

[web开发]☆★之jquery制作滑动面板 项目开发中,我们有时候需要点击某个按钮出现一个面板,在面板上有我们需要的一些操作,或者是图片.ok!如下简单制作滑动面板效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效

原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm 版权声明:本文为博主原创文章,未经博主允许不得转载.

swiper 、css3制作移动端网站,折叠导航

swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题让我不知道选用fullpage还是选择swiper来写这个项目.下图就是这个项目完成的效果. 问题1:整屏滑动两个插件都可以用,但是移动端用swiper偏多的 问题2:网站的导航要随着页面更新跳转 这里fullage还是很实用的 问题3:我想用swiper却不是很熟悉swiper怎么制作导航(平时不

css3+jquery制作3d旋转相册&lt;转&gt;

css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备 新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

如何使用jQuery 制作全屏幕背景的嵌入视频

实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&

JS案例之5——移动端触屏滑动

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

移动端触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

jQuery控制的不同方向的滑动(横向滑动等)

引入jquery.js,复制以下代码,即可运行. Css代码   <style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; height: 100; lightblue; width: 100% } </style> 1.slidetoggle()