移动端网页特效：左右滑动开关
Posted 小虫虫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端网页特效：左右滑动开关相关的知识，希望对你有一定的参考价值。
网上搜索“左右滑动开关”，结果有很多诸如：纯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事件，其他的并没有用到，有必要把这个事件单独取出来引用。这个后期考虑吧~
以上是关于移动端网页特效：左右滑动开关的主要内容，如果未能解决你的问题，请参考以下文章