javascript - 可滑动的内联按钮移动

Question

我有一个有序的内联按钮列表，我已经将它们从屏幕上移开。我想让这些按钮可以滑动，这样你就可以找到那些离开屏幕的按钮。

   <style>
    .banner-test {
        transition: all 0.4s ease;
        overflow: hidden;
        height: auto;
        padding: .625em .850em;
        position: fixed;
        z-index: 100;
        bottom: 0px;
        width: 100%;
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(0, 0, 0);
        /* RGBa with 0.6 opacity */
        background: rgba(0, 0, 0, 0.6);
        /* For IE 5.5 - 7*/
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
        /* For IE 8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
        -webkit-transform: translate3d(0, 0px, 0);
        transform: translate3d(0, 0px, 0);
    }
    .ui-btn {
        background: #f6f6f6;
        border-color: #ddd;
        color: #333;
        text-shadow: 0 1px 0 #f3f3f3;
        font-weight: 700;
        font-size: 16px;
        margin: .5em 0;
        padding: .7em 1em;
        display: block;
        border-width: 1px;
        border-style: solid;
        position: relative;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .ui-btn:link {
        text-decoration: none;
    }
    .ui-btn-inline {
        display: inline-block;
        vertical-align: middle;
        margin-right: .625em;
    }
    .swiper-holder {
        width: 170%;
        white-space: nowrap;
    }
    .swiper-holder div {
        width: 16%;
        display: inline;
    }
</style>
<div class="banner-test">
    <div class="swiper-holder">
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
        <div><a href="#" class="ui-btn ui-btn-inline">Button</a></div>
    </div>
</div>

是否可以直接在 jQuery 中执行此操作？我看过并发现了有关 touchend、touchstart 等的信息，但我真的不知道从哪里开始，大多数浏览器是否支持它？

网上没有关于此的任何内容，我也没有真正看到其他人这样做。

fiddle :https://jsfiddle.net/ye2q5ede/

Answer 1

你能试试这个插件吗 http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html

它为您提供所有类型的触摸事件，并在所有设备上运行良好。