jquery mobile touch 实例

最新推荐文章于 2019-07-07 02:34:36 发布

Tosone

最新推荐文章于 2019-07-07 02:34:36 发布

阅读量354

点赞数

分类专栏： CSS HTML JS

本文链接：https://blog.csdn.net/u011885865/article/details/42032227

版权

JS 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.ui.effect.min.js"></script>
    <style type="text/css">
        * { font-family: 'Microsoft YaHei'; }
        body, html { width: 100%; }
        div .asdd div { }
        .one { left: 0%; }
        .two { left: 25%; }
        .three { left: 50%; }
        .four { left: 75%; }
        #ul-one, #ul-two, #ul-three, #ul-four { position: relative; }
        #ul-one { left: 0%; }
        #ul-two { left: 100%; display: none; }
        #ul-three { left: 100%; display: none; }
        #ul-four { left: 100%; display: none; }
        .ul-active { display: block; }
        #touch-box { width: 100%; }
        .ul-style { list-style: none; margin-top: 0px; padding-left: 0px; }
            .ul-style > li { width: 100%; background: -webkit-linear-gradient(top,#f1f1f1,#fdfdfd); padding: 5px; background: -moz-linear-gradient(top,#f1f1f1,#fdfdfd); background: -o-linear-gradient(top,#fff,#fdfdfd); border-top: 1px solid #ccc; padding: 3px; }
            .ul-style :last-child { border-bottom: 1px solid #ccc; padding: 3px; }
            .ul-style li > a { text-decoration: none; margin: 1%; }
    </style>
    <script type="text/javascript">
        $(function () {
            var arr = ["#firsta a", "#seconda a", "#thirda a", "#fortha a"], arry = 0, ularr = ["#ul-one", "#ul-two", "#ul-three", "#ul-four"];
            $(document)
            .bind("swiperight", function () { $(".ui-btn-active").removeClass("ui-btn-active"); arry++; if (arry > 3) arry = 0; $(arr[arry]).addClass("ui-btn-active"); $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": arry * 25 + "%" }, "easeOutQuint"); $(ularr[arry]).show().addClass("ul-active").animate({ "left": "0%" }, 300); })
            .bind("swipeleft", function () { $(".ui-btn-active").removeClass("ui-btn-active"); arry--; if (arry < 0) arry = 3; $(arr[arry]).addClass("ui-btn-active"); $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": arry * 25 + "%" }, "easeOutQuint"); $(ularr[arry]).show().addClass("ul-active").animate({ "left": "0%" }, 300); });
            $("#firsta").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "0%" }, "easeOutQuint"); $("#ul-one").show().addClass("ul-active").animate({ "left": "0%" }, 300); });
            $("#seconda").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "25%" }, "easeOutQuint"); $("#ul-two").show().addClass("ul-active").animate({ "left": "0%" }, 300); });
            $("#thirda").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "50%" }, "easeOutQuint"); $("#ul-three").show().addClass("ul-active").animate({ "left": "0%" }, 300); });
            $("#fortha").click(function () { $(".ul-active").removeClass("ul-active").animate({ "left": "-100%" }, 300).hide(); $("#box").animate({ "left": "75%" }, "easeOutQuint"); $("#ul-four").show().addClass("ul-active").animate({ "left": "0%" }, 300); });
        })
    </script>
</head>
<body>
    <div id="touch-box">
        <div data-role="navbar" data-grid="c">
            <ul>
                <li id="firsta"><a href="#" class="ui-btn-active">新闻</a></li>
                <li id="seconda"><a href="#">娱乐</a></li>
                <li id="thirda"><a href="#">大事</a></li>
                <li id="fortha"><a href="#">小事</a></li>
            </ul>
            <div class="asdd">
                <div style="width: 25%; height: 20px; background-color: #f00; position: relative;" id="box"></div>
            </div>
        </div>
        <ul id="ul-one" class="ul-active ul-style">
            <li><a href="#" style="color: #333">Acura</a></li>
            <li><a href="#" style="color: #333">Audi</a></li>
            <li><a href="#" style="color: #333">BMW</a></li>
            <li><a href="#" style="color: #333">Cadillac</a></li>
            <li><a href="#" style="color: #333">Ferrari</a></li>
        </ul>
        <ul id="ul-two" class="ul-style">
            <li><a href="#" style="color: #333">sd</a></li>
            <li><a href="#" style="color: #333">sd</a></li>
            <li><a href="#" style="color: #333">sd</a></li>
            <li><a href="#" style="color: #333">sdc</a></li>
            <li><a href="#" style="color: #333">sdi</a></li>
        </ul>
        <ul id="ul-three" class="ul-style">
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">df</a></li>
        </ul>
        <ul id="ul-four" class="ul-style">
            <li><a href="#" style="color: #333">we</a></li>
            <li><a href="#" style="color: #333">we</a></li>
            <li><a href="#" style="color: #333">df</a></li>
            <li><a href="#" style="color: #333">ewc</a></li>
            <li><a href="#" style="color: #333">wei</a></li>
        </ul>
    </div>
</body>
</html>

Tosone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile touch 实例

demo * { font-family: 'Microsoft YaHei'; } body, html { width: 100%; } div .asdd div { } .one { left: 0%; } .two { left: 25%;
复制链接

扫一扫