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等的内容，但我真的不知道从哪里开始这个并且大多数浏览器都支持这个吗？

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

小提琴：https://jsfiddle.net/ye2q5ede/

Answer 1

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

吗？

它为您提供所有类型的触摸事件，并且适用于所有设备。

Answer 2

这是一种将按钮保存在包装器中的方法，当浏览器窗口达到较低宽度时，它将启用滚动条，您可以用手指在移动设备上滑动。

HTML

<div class="wrapper">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
     <input type="button" class="button" value="Select">
</div>

CSS

    body {
      background-color: #333;
    }
    .wrapper {
      width: 100%;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 1rem;
      background-color: #ccc;
    }

.internal {
  display: inline;
  background-color: wheat;
  &:nth-child(odd) {
    background-color: hotpink;
  }
}

JSFiddle

可移动的内联按钮移动

2 个答案: