0

jsFiddle

HTML

<div class="next">Next</div>
<div class="prev">Prev</div>

jQuery

    $(function() {
        $('ul.nav a').bind('click',function(event){
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000);
            event.preventDefault();
        });
    });

アイデアは単純に聞こえますが、これをまったく機能させることができません。次または前のホバーでページをスクロールできるようにしたい。クリックしてスクロールして下に固定できますが、この追加機能は最適です。

4

1 に答える 1

1

エッジケースの世話をする必要がある単なるモックアップ：

$(function() {
  $('ul.nav a').bind('click',function(event){
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollLeft: $($anchor.attr('href')).offset().left
    }, 1000);
    event.preventDefault();
  });
  $('.next').on('mouseenter', rscroll);
  $('.prev').on('mouseenter', lscroll);
  $('.next,.prev').on('mouseleave', function() {
    $('body').stop();
  });

  function rscroll() {
    $('body').animate({
      scrollLeft: '+=25'
    }, 10, rscroll);
  }

  function lscroll() {
    $('body').animate({
      scrollLeft: '-=25'
    }, 10, lscroll);
  }
});
*{
  margin:0;
  padding:0;
}
.prev, .next{
  color:#fff;
  position:fixed;
  top:200px;
  height:100%;
  text-shadow:1px 1px 1px #000;
}
.prev{
  left:0;
}
.next{
  right:0;
}
body{
  background:#000;
  font-family:Georgia;
  font-size: 34px;
  font-style: italic;
  letter-spacing:-1px;
  width:12000px;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
}
.section{
  margin:0px;
  bottom:0px;
  width:4000px;
  float:left;
  height:100%;
  text-shadow:1px 1px 2px #f0f0f0;
}
.section h2{
  margin:50px 0px 30px 50px;
}
.section p{
  margin:20px 0px 0px 50px;
  width:600px;
}
.black{
  color:#fff;

  background:#000 url(../images/black.jpg) no-repeat top right;
}
.white{
  color:#000;
  background:#fff url(../images/white.jpg) no-repeat top right;
}

.section ul{
  list-style:none;
  margin:20px 0px 0px 550px;
}
.black ul li{
  float:left;
  padding:5px;
  margin:5px;
  color:#aaa;
}
.black ul li a{
  display:block;
  color:#f0f0f0;
}
.black ul li a:hover{
  text-decoration:none;
  color:#fff;
}
.white ul li{
  float:left;
  padding:5px;
  margin:5px;
  color:#aaa;
}
.white ul li a{
  display:block;
  color:#222;
}
.white ul li a:hover{
  text-decoration:none;
  color:#000;
}
<script src="http://tympanus.net/Tutorials/WebsiteScrolling/jquery.easing.1.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="next">NExt</div>
<div class="prev">Prev</div>
<div class="section black" id="section1">
  <h2>Section 1</h2>
  <p>
    MY Spectre around me night and day
    Like a wild beast guards my way;
    My Emanation far within
    Weeps incessantly for my sin.
  </p>
  <ul class="nav">
    <li>1</li>
    <li><a href="#section2">2</a></li>
    <li><a href="#section3">3</a></li>
  </ul>
</div>
<div class="section white" id="section2">
  <h2>Section 2</h2>
  <p>
    ‘A fathomless and boundless deep,
    There we wander, there we weep;
    On the hungry craving wind
    My Spectre follows thee behind.

  </p>
  <ul class="nav">
    <li><a href="#section1">1</a></li>
    <li>2</li>
    <li><a href="#section3">3</a></li>
  </ul>
</div>
<div class="section black" id="section3">
  <h2>Section 3</h2>
  <p>
    ‘He scents thy footsteps in the snow
    Wheresoever thou dost go,
    Thro’ the wintry hail and rain.
    When wilt thou return again?

  </p>
  <ul class="nav">
    <li><a href="#section1">1</a></li>
    <li><a href="#section2">2</a></li>
    <li>3</li>
  </ul>
</div>

于 2013-03-21T15:31:25.740 に答える