javascript - スクロールパスショーjquery

Question

このデモと同様の機能が必要ですが、必要なのはタブヘッダーをスクロールする機能だけです。

div に要素のリストがあり、デモタブヘッダーなどのアイテムをスクロールする必要があります。

内部要素に絶対位置を設定してみました。それでも、私は機能を取得しませんでした。

タブヘッダーのスクロール機能を実現するにはどうすればよいですか?

サーバー側のコードの相互作用により、自分のものを公開できません。

score 1 · Accepted Answer

これはあなたが期待しているもののデモです

http://jsbin.com/opufow/4/edit

最初にアイテムを非表示にしてから、アニメーションを使用してスクロールする必要があります。

score 0 · Accepted Answer

iscroll.js を使用して、要素を水平または垂直にスクロールできます。これにより、スムーズなスクロール感が得られます。

デモリンクを確認する

http://iscroll-js.googlecode.com/hg-history/bd496ab69c553b6e3d294c5f68200513215f5e75/examples/horizontal-scroll/index.html

Iscroll.js は、次の場所からダウンロードできます。

http://cubiq.org/iscroll

score 0 · Accepted Answer

これを試してください: http://jsbin.com/welcome/42790 これがあなたが探している効果だと思います。ソースコードは次のとおりです。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="scroll">
      <div id="parent" class="parent">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">7</div>
      </div>
    </div>
    <button id="leftButton">&lt;</button>
    <button id="rightButton">&gt;</button>
  </body>
</html>

CSS

.parent {
  width: 364px;
  height: 52px;
  background: #EDC9FF;
  margin-left: 0px;
}
.block {
  width: 50px;
  height: 50px;
  background: #C9E2FF;
  border: 1px solid #8FC3FF;
  float: left;
}
.scroll {
  overflow: hidden;
  width: 200px;
}

JavaScript

var timeout = 0;

window.onload = function () {
  var leftBtn = document.getElementById('leftButton'),
      rightBtn = document.getElementById('rightButton');

  leftBtn.addEventListener('mousedown', function () {
    multipleScroll(-2);
  }, false);

  leftBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

  rightBtn.addEventListener('mousedown', function () {
    multipleScroll(2);
  }, false);

  rightBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

};

function scroll(offset) {
  var parent = document.getElementById('parent'),
      current = parseInt(parent.style.marginLeft, 10) || 0;
  current += offset;
  parent.style.marginLeft = current + 'px';
}


function multipleScroll(offset) {
  timeout = setTimeout(function () {
    multipleScroll(offset);
    scroll(offset);
  }, 20);
}

javascript - スクロールパスショーjquery

3 に答える 3

Related

Reference