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

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事件,其他的并没有用到,有必要把这个事件单独取出来引用。这个后期考虑吧~

以上是关于移动端网页特效:左右滑动开关的主要内容,如果未能解决你的问题,请参考以下文章

javascript移动端禁止页面滑动的解决方案

iOS UICollectionView左右滚动和上下滑动处理

1加手机怎么关闭网页左右滑动

vue移动端开发列表左边固定右边可以左右滑动上下滑动同步?

H5移动端禁止页面左右滑动

jquery制作移动端菜单栏左右滑动