如何仅使用HTML和CSS通过移动站点上的DIV中的一组图像以加速/减速水平滑动/滚动

Question

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

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

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

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

需要在iOS和Android上运行.

Answer 1

我们之后需要这样的东西,所以当时我做了一个演示.这是非常基本的,但它将奠定你所需的所有基础工作.首先,让我们从标记开始:

标记

既然你在问题的标签部分提到了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插件,它将提供更复杂的功能.这是该网站的链接.