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

hammer实现手机滑动条

时间:2018-10-14 20:53:48      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:rds   mod   ack   com   form   java   doctype   data   pat   

<!doctype html>
<html class="no-js">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>手机滑动条</title>
        <link rel="stylesheet" href="css/amazeui.min.css">
        <link rel="stylesheet" href="css/swiper-3.3.1.min.css">
        <link rel="stylesheet" href="css/wx.css">
    </head>

    <body>

        <div class="wx-handle-main">
            <div class="am-g">
                <div class="am-u-sm-6">
                    <p class="wx-basics-launch-name">申请人</p>
                </div>
                <div class="am-u-sm-6 wx-basics-launch-select">
                    流程名称
                </div>
            </div>
            <div class="wx-basics-handel-modular am-cf">
                <div class="wx-basics-handel-modular-checkbox">
                    <label class="am-checkbox am-success">
                <input type="checkbox" value="" data-am-ucheck class="userid">
            </label>
                </div>
                <div class="wx-basics-handel-modular-main">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="javascript:;" class="wx-basics-handel-modular-a">
                                    <div class="am-g wx-basics-handel-introduce">
                                        <div class="am-u-sm-3 wx-basics-handel-introduce-user">
                                            <img src="images/user-img.png">
                                        </div>
                                        <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                            <p>李悠纯<span>10分钟前</span></p>
                                            <p class="am-text-truncate">由于感冒了,需要请假休息一天!</p>
                                        </div>
                                        <div class="am-u-sm-3 wx-basics-handel-introduce-state">
                                            请假
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide wx-basics-handel-introduce-span">
                                <a href="javascript:;">不通过</a>
                                <a href="javascript:;">通过</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
            <!--<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>-->
            <script src="js/hammer.min.js" type="text/javascript" charset="utf-8"></script>

            <script type="text/javascript">
                var oCon = document.querySelector(".swiper-container");
                var oShow = document.querySelector(".wx-basics-handel-modular-main");
                var oHid = document.querySelector(".wx-basics-handel-introduce-span");

                var hammer = new Hammer(oCon);

                hammer.on("panstart", function(e) {

                    hammer.on("panleft", function(e) {
                        oCon.style.transition = "-webkit-transform 500ms ease-out";
                        oCon.style.webkitTransform = "translate(" + -oHid.offsetWidth + "px,0px) scale(1) translateZ(0px)";

                        hammer.on("panright", function(e) {
                            console.log(2);
                            oCon.style.transition = "-webkit-transform 500ms ease-out";
                            oCon.style.webkitTransform = "translate(" + 0 + "px,0px) scale(1) translateZ(0px)";
                        });
                    });

                });
            </script>

    </body>

</html>

 

hammer实现手机滑动条

标签:rds   mod   ack   com   form   java   doctype   data   pat   

原文地址:https://www.cnblogs.com/150536FBB/p/9787533.html

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