1

我想允许移动网站用户在图标列表中滑动/滚动。

图标是div包含标签的img标签。

在此处输入图像描述

用户应该能够滑动容器，向左或向右滚动/滑动元素。

图像需要通过加速和减速平滑滑动。

需要在 iOS 和 Android 上工作。

4

1 回答 1

10

我们以前需要这样的东西，所以当时我为它做了一个演示。这是非常基本的，但它会奠定你需要的所有基础工作。首先，让我们从标记开始：

标记

既然您在问题的标签部分提到了 jQM，我将使用 jQM[data-role=page]标记。你会有这样的结构：

  <div data-role="page">
    <div data-role="header" data-theme="b">
      <h1>Slideshow</h1>
    </div>
    <div data-role="content">
      <div class="images">
        <!--your images here -->
      </div>
    </div>
  </div>

因此，您可以将所有图像放在 div 中class=images。一组特定的图像被封装在a这样的标签中：

<a href="#">
  <img src="25AC.jpg" />
</a>
<a href="#"> 
  <img src="nature.jpg" />
</a>
<!--so on-->

你会把它放在里面div.images。这就是我们拥有的标记。

CSS

样式表部分很简单。

.images {
    height : 280px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    background-color : #272722;

}
.images a{
  padding : 14px 5px 0px 5px;
  margin: 5px 3px 0px 3px;
  vertical-align: middle;
  display: inline-block;
}

images img {
  max-width: 100%; 
  max-height:512px;
}

此处需要注意的重要属性：

  1. ,属性：前者需要启用overflow-x，overflow-y后者需要禁用。只有这样，当您向右或向左滑动时才会发生滚动。
  2. white-space属性：这对于使图像以直线水平布局非常重要。
  3. max-width属性：这是用于在移动设备上缩放图像。

就是这样！你完成了！

附加功能

我刚刚添加了一个弹出窗口以在点击时显示图像，以便我能够演示事件处理。这是弹出窗口：

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="b" data-corners="false">
  <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <div id="stuff"></div>
</div>

div#stuff当单击a周围的时，我会将图像放入其中img。这是JS：

//pageinit event of page
$(document).on("pageinit", "[data-role=page]", function() {
  //cache popup for future use
  var $popup = $("#popupInfo");
  //click event for "a" tag inside .images
  $(this).on("click", ".images > a[href=#]", function(e) {
    //prevent default action
    e.preventDefault();
    //clone the image inside "a"
    var $img = $(this).find("img").clone();
    //add the cloned image inside #stuff
    $popup.find("#stuff").html($img);
    //open popup()
    $popup.popup().popup("open");
  });
});

演示和代码

jsbin.com 上的演示和代码

备择方案

你可以试试 swipejs，这是一个 jQuery 插件，它将提供更复杂的功能。这是该网站的链接。

于 2013-08-04T11:29:52.933 回答