jquery实现移动端按钮组左右滑动
本文实例为大家分享了jquery实现移动端按钮组左右滑动的具体代码，供大家参考，具体内容如下
学习移动端触摸相关功能时写了一个例子，共享一下，其中最不好理解的是screen、page、client相对坐标的问题，我画了一个简图帮助记忆：
jquery插件源码：
//按钮滑动插件
+(function ($, w, d, undefined) {
jQuery.fn.slideLeftRight = function () {
var start = null;//每一次触屏的开始位置
var current = 0;//滑动过程中的位置
var end = 0;//滑动结束时的触屏位置
var _this = null;//对象代理
$(this).css({ "white-space": "nowrap", "position": "absolute", "left": 0, "overflow": "hidden" })
.parent().css({ "position": "relative", "overflow": "hidden" });
_this = this;
var wwidth=$(window).width();//浏览器的宽度
//对象left位置
var _obj_left = $(this).css("left") == "auto" ? 0 : parseInt($(this).css("left"));
var objWidth = $(_this).width();
$(_this).on({
touchstart: function () {
var target = event.changedTouches[0];
start = target.pageX;
current = target.pageX;
},
touchmove: function () {
var target = event.changedTouches[0];
$(_this).css("left", _obj_left + (target.pageX - start));
current = target.pageX
}, touchend: function () {
var target = event.changedTouches[0];
end = target.pageX;
_obj_left = _obj_left + (target.pageX - start);
if (start > end ) {
//左
//浏览器的宽度 小于对象的宽度
if (objWidth > wwidth) {
//对象的宽度 - 对象left < 浏览器的宽度
if (objWidth - Math.abs( _obj_left) < wwidth) {
var objLeft = objWidth - wwidth;
$(_this).animate({ "left": -objLeft });
_obj_left = -objLeft;
}
} else {
//浏览器的宽度 >= 对象的宽度
$(_this).animate({ "left": "0"});
_obj_left = 0;
}
} else if (start <= end) {
//右
if (_obj_left > 0) {
$(_this).animate({"left":"0"});
_obj_left = 0;
}
}
}
});
};
})(jQuery, window, document);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c
-
jQuery实现简单的滑动导航代码(移动端)
1.1 App滑动导航 说明:这个例子主要是实现一条导航山只有两个选项的. 1.适合用于移动端. 2.滑动条的长度是选项内容的长度. 1.1.1. 效果图 1.1.2. Html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动导航</title> </head> <body> <ul class="
-
jquery左右全屏大尺寸多图滑动效果代码分享
本文实例讲述了jquery左右全屏大尺寸多图滑动效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换
-
jquery mobile移动端幻灯片滑动切换效果
自动适应设备的宽度,滑动会切换大图,底部导航跟随切换.点击底部导航切换大图.使用的jquery_mobile插件,引入1.4.5的插件,CSS表和jquery库即可,除了ID,CLASS命名可能会和你项目重复,改成单独即可,其他应该没有重复的,因为本脚本使用计时器写的,加入了方法判定,在执行一个方法的时候,锁定其他方法禁止执行,不会冲突,使用计时器来控制动画,可能不尽如人意,准备重构一下改成Jquery的animate()方法来执行动画效果.近期重构好在上传使用内置方法不用计时器的版本吧. <h
-
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下,如果大家觉得还不错,很满意可以下载源码哦. 效果展示 源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="sl
-
移动端jQuery修正Web页面滑动时div问题的两则实例
顶部固定时划屏出现闪动 头部是一个普通的div,高度是48,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动.出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验. 解决方法一: 之前的做法: if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - parseInt($(window).scrollTop())); }else{ $(&qu
-
jquery实现移动端按钮组左右滑动
本文实例为大家分享了jquery实现移动端按钮组左右滑动的具体代码,供大家参考,具体内容如下 学习移动端触摸相关功能时写了一个例子,共享一下,其中最不好理解的是screen.page.client相对坐标的问题,我画了一个简图帮助记忆: jquery插件源码: //按钮滑动插件 +(function ($, w, d, undefined) { jQuery.fn.slideLeftRight = function () { var start
-
Bootstrap按钮组实例详解
使用方法 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行.不过我们同样可以直接只调用bootstrap.js文件.因为这个文件已集成了button.js插件功能 同样地,因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果 <!DOCTYPE html> <html lang="en"> <head> <meta chars
-
Bootstrap基本组件学习笔记之按钮组(8)
按钮组允许多个按钮被堆叠在同一行上,实现起来非常简单. 0x01 基本用法 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l
-
jQuery实现移动端滑块拖动选择数字效果
本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"
-
Bootstrap按钮组简单实现代码
本文实例为大家分享了Bootstrap按钮组的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,i
-
jQuery实现图片与文字描述左右滑动自动切换的方法
本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
-
jQuery实现长按按钮触发事件的方法
本文实例讲述了jQuery实现长按按钮触发事件的方法.分享给大家供大家参考.具体分析如下: 现在手机端的快速发展,使许多手机手势需要制作到手机版的网页过程中 网上有许多长按按钮的插件,甚至仅仅是jQuery Mobile都有长按事件 但是基于种种的兼容性问题, 只使用jquery去实现长按动作,可以在手机端与电脑端保持极强的兼容性 一.基本目标 制作一个按钮,实质上一个100x100px的灰色背景的图层,长按达2s则图层里的文字从in变成out.如下图所示: 二.制作过程 代码如下: 复制代码
-
Bootstrap CSS组件之按钮组(btn-group)
.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的. 容器的多个分组以table风格进行显示,每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{ displ
-
移动端手指操控左右滑动的菜单
本文实例为大家分享了移动端手指操控左右滑动菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端手指操控左右滑动的菜单</title> <style type="text/css"> body {margin:0;} .menu-w
-
jQuery仿移动端支付宝键盘的实现代码
最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种.由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现.话不多说,先上图看看效果. 尼玛,这不就是支付宝app那个支付键盘吗? 没错,咱们UI就是参照支付宝做的这个键盘.你可能会问,为什么不直接调用支付宝提供的支付接口呢.额,因为项目需要,这里就不多解释了. 我们先看一下实现后的效果图 HTML部分 <!-- 支付键盘 --> <divclass="pay-contai