aside移动端小按钮

作者: As大大 | 来源:发表于2017-07-27 01:08 被阅读0次

aside移动端小按钮
“返回顶部”按钮效果
解决Next主题移动端显示异常
基于react实现的移动端的可吸附悬浮按钮，支持拖动拖拽功能
移动端悬浮按钮
移动端监听返回按钮
移动端项目中, 清除一些苹果手机的默认样式
web移动开发资源整理之常见bug的解决方案
Axure中用不同方法制作单选按钮交互效果
移动端H5页面按钮btn点击效果


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0">
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script type='application/javascript' src="fastclick.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            background-color: #666;
        }

        section {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        #ctrl-wrapper {
            position: absolute;
            right: 50px;
            bottom:30px;
        }
        #ctrl {
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            background-color: #f6f1f1;
            text-align: center;
            line-height: 3rem;
            border:1px solid #eee;
            font-size: 12px;
        }
        #ctrl-wrapper .items{
            width: 5rem;
            list-style: none;
            position: absolute;
            left: -1.2rem;
            top:-5.4rem;
            transform: rotate(0deg) translateX(10rem);
            opacity: 0;
            padding:0;
            transition: transform,opacity .5s,.3s ;
        }
         #ctrl-wrapper .items li {
             margin-bottom: .5rem;
             color: #fff;
         }
    </style>
</head>

<body>

    <section>

        <aside id="ctrl-wrapper">
            <div id="ctrl">
                <span>操作</span>
            </div>
            <ul class="items" data-isshow="false">
                <li style="text-indent: .6rem">尚未送达</li>
                <li>我已到达</li>
            </ul>
        </aside>
   </section>


<script>
    // 引用fastclick
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
    }

    $('body').on('touchstart', '#ctrl', function () {
        if ($('.items').data('isshow')) {
            $('.items').css({
                transform: 'rotate(320deg) translateX(0rem)',
                opacity: 1
            }).data('isshow', 'false');
        } else {
            $('.items').css({
                transform: 'rotate(0deg) translateX(10rem)',
                opacity: 0
            }).data('isshow', 'true');
        }
    })

    $('body').on('touchstart', '.items li', function () {
        alert(this.innerHTML)
    })
</script>
</body>

</html>