可滑动的内联按钮移动

Swipeable Inline Buttons Mobile

本文关键字：按钮 移动      更新时间：2023-09-26

我有一个有序的内联按钮列表，这些按钮是我为离开屏幕而制作的。我想让这些按钮可以滑动，这样你就可以找到那些离开屏幕的按钮。

   <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/

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

它为您提供所有类型的触摸事件，并且在所有设备上都能很好地工作。

这是一种将按钮保存在包装中的方法，当浏览器窗口的宽度变小时，它将启用一个滚动条，您可以在手机上用手指滑动。

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

相关文章：