移动端网页特效：左右滑动开关

网上搜索“左右滑动开关”，结果有很多诸如：纯CSS3左右滑动开关按钮等。但事实上，这种按钮是click事件触发的。在手机网页上用这种组件，对于IPhone用户，见多了很多这种滑动按钮，如果点击触发，会显得很不协调。

说白了，网上的这种按钮都是点击按钮而非滑动按钮。我们现在要找一个滑动事件来替代click事件，最先想到的是touch相关的事件，后来在wscschool上找到了

Swipe事件：http://www.w3school.com.cn/jquerymobile/jquerymobile_events_touch.asp；。

这个解决方案需要引入jQuery Mobile；需要注意引入这个js后产生一系列的添加样式。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/****去掉jquery mobile的loading****/.ui-loader-default{ display:none}.ui-mobile-viewport{ border:none;}.ui-page {padding: 0; margin: 0; outline: 0}
/******滑动开关按钮*****/
.ui-switch {/*position: absolute;*/font-size: 16px;/*right: 15px;*/top: 6px;width: 52px;height: 22px;line-height: 1em;margin-right: 50px;margin-top: 5px;
}.ui-switch .input {width: 52px;height: 22px;position: absolute;z-index: 10;border: 0;background: 0 0;-webkit-appearance: none;outline: 0
}.ui-switch .input:before {content: '';width: 50px;height: 25px;border: 1px solid #dfdfdf;background-color: #fdfdfd;border-radius: 20px;cursor: pointer;display: inline-block;position: relative;vertical-align: middle;-webkit-user-select: none;user-select: none;-webkit-box-sizing: content-box;box-sizing: content-box;border-color: #dfdfdf;-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;box-shadow: #dfdfdf 0 0 0 0 inset;-webkit-transition: border .4s, -webkit-box-shadow .4s;transition: border .4s, box-shadow .4s;-webkit-background-clip: content-box;background-clip: content-box
}.ui-switch.cur .input:before {border-color: #ed6459;-webkit-box-shadow: #ed6459 0 0 0 16px inset;box-shadow: #ed6459 0 0 0 16px inset;background-color: #ed6459;transition: border .4s, box-shadow .4s, background-color 1.2s;-webkit-transition: border .4s, -webkit-box-shadow .4s, background-color 1.2s;background-color: #ed6459
}.ui-switch.cur .input:after {left: 27px
}.ui-switch .input:after {content: '';width: 25px;height: 25px;position: absolute;top: 1px;left: 0;border-radius: 100%;background-color: #fff;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: left .2s;transition: left .2s
}
</style>
</head>
<body>
<div><label  class="ui-switch"><span class="input"></span></label>
</div><script src="../../assets/js/jquery.min.js"></script>
<script>
//去掉 jquery mobile默认给input的添加,。顺序在引入之前
$("input").attr('data-role','none');
$("select").attr('data-role','none');
</script>
<script src="../../assets/js/jquery.mobile.js"></script>
<script>$(".ui-switch").on('swipe',function(){if($(this).attr("class").indexOf("cur")>0) {$(this).removeClass("cur");}else{$(this).addClass("cur");}});
</script>
</body>
</html>

至此，从点击的开关变成了滑动的开关。有点问题，其实只用到了jQuery Mobile中的

Swipe事件，其他的并没有用到，有必要把这个事件单独取出来引用。这个后期考虑吧~

转载于:https://www.cnblogs.com/xiaochongchong/p/5524409.html

移动端网页特效：左右滑动开关相关推荐

javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
JavaScript-PC端网页特效
(五)PC端网页特效 [!TIP] 在前面学习了JS基础.DOM 和 BOM 的基本操作后,这部分主要学习这些知识的拓展应用. 1. 元素偏移量 offset 系列 1.1 offset 概述 off ...
JavaScript之移动端网页特效与本地存储（57th）
一.移动端网页特效 1. 触摸事件 1.1 触屏事件概述 1.移动端浏览器兼容性较好,我们不需要考虑以前JS 的兼容性问题,可以放心的使用原生JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 ...
JS 移动端网页特效（二）
案例: 2022年7月31日周日学习记录博客学习时长:4h.学习进度:移动端网页特效案例及知识扩展. 目录移动端网页特效 3. 移动端常用开发插件 3.1 什么是插件 3.2 插件的使用 3.3 ...
PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储
目录 PC 端网页特效元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜元素可视 ...
JS PC端网页特效（一）
2022年7月27日周三学习记录博客学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...

移动端网页特效：左右滑动开关

移动端网页特效：左右滑动开关相关推荐

最新文章

热门文章