码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-05-24 18:58:25      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:

网上搜索“左右滑动开关”,结果有很多诸如:纯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事件,其他的并没有用到,有必要把这个事件单独取出来引用。这个后期考虑吧~

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

标签:

原文地址:http://www.cnblogs.com/xiaochongchong/p/5524409.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!