jquery-touchSwipe实现从左向右滑动

EverWHL 2016-02-16 04:20:25

现在两个div,想用就Jquery的touchSwipe插件实现从左向右滑动。请大家指导,感激不进。

...全文

341 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

EverWHL 2016-02-17

打赏
举报

没人知道吗？？顶起来

EverWHL 2016-02-16

打赏
举报

现在用touchSwipe 触摸pad屏幕,实现从左向右滑动的效果,请各位大神指教。我现在只能实现上下滑动,而不能实现左右


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="bootstrap.css" type="text/css"/>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <style>
        .jc {
            width: 100vw;
            height: 100vh;
            background: url(img/index.png) no-repeat;
            background-size: 100% 100%;
        }

        .jc p {
            width: 34vw;
            margin: 0 auto;
            padding-top: 60vh;
            line-height: 6vh;
        }

        .jc p img {
            width: 13.2vw;
            height: 5.789vh;
            float: left
        }

        .jc p span {
            color: #000;
            font-size: 4vw;
            float: left;
            display: block
        }

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0%;
        }

        .container .page {
            height: 100%;
            position: relative;
        }

        /*.container .page2 {
            left: 100%;
            position: relative;
        }*/
    </style>
</head>
<body>
<div class="container">
    <div class="jc col-xs-12 col-sm-12 page " id="prev">
        <p><img src="img/font.png"><span>张筱筱女士</span></p>
    </div>
    <div id="next" class="page">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#security_plan" data-toggle="tab">保障计划</a></li>
            <li><a href="#security_concept" data-toggle="tab">保险理念</a></li>
            <li><a href="#company_introduction" data-toggle="tab">公司介绍</a></li>
            <li><a href="#market_information" data-toggle="tab">营销员信息</a></li>
        </ul>
        <div class="tab-content">
           
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var nowpage = 0;
        $(".container").swipe({
            swipe: function (event, direction, distance, duration, fingerCount) {
                if (direction == "left") {
                    nowpage = nowpage + 1;
                } else if (direction == "right") {
                    nowpage = nowpage - 1;
                }
                if (nowpage > 2) {      //此处定义全屏滑动张数
                    nowpage = 2;
                }
                if (nowpage < 0) {
                    nowpage = 0;
                }
                $(".container").animate({
                    "top": nowpage * -100 + "%"
                }, 400);
                //$("#next").show();
            }
        });
    })
</script>
</body>
</html>

EverWHL 2016-02-16