jQuery用鼠标滚动按钮移动,具体内容安静

时间:2017-04-23 17:08:26

标签: jquery web

我有基本逻辑的代码声明,并希望在我的项目中实现:

<script type="text/javascript">
$(document).ready(function() {
$('#moveleft').click(function() {
    $('#textbox').animate({
    'marginLeft' : "-=30px" //moves left
    });
});
$('#moveright').click(function() {
    $('#textbox').animate({
    'marginLeft' : "+=30px" //moves right
    });
});
$('#movedown').click(function() {
    $('#textbox').animate({
    'marginTop' : "+=30px" //moves down
    });
});
$('#moveup').click(function() {
    $('#textbox').animate({
    'marginTop' : "-=30px" //moves up
    });
});
});
</script>

我想修改这段代码,可以使用鼠标的滚动按钮,如果鼠标向上滚动则上升,如果向下滚动则向下移动。

 <div id="rezitator" class="sticky row other black fade-in full_height">
    <div class="row">
      <div class="col-md-6">
        <div class="slider container-fluid"  id="slider">
          <div class="meta text-center">1 / 3</div>
            <div class="row">
              <a class="col-sm-1 slide_nav left-nav"><span>Before</span></a>
              <div class="col-sm-10">
                <img src="img/s/RT_Rezitator_01.jpg">
              </div>
              <a class="col-sm-1 slide_nav right-nav"><span>After</span></a>
            </div>
            <div class="description text-center">
              <p>Ryo Takeda liest Haruki Murakami im Übel &amp; Gefährlich<br /> Hamburg, November 2014</p>
            </div>
        </div>
      </div>
      <div class="col-md-6">
        <h1 class="text-center">Ryo Takeda liest</h1>
        <p class="h2">Einen Text laut zu lesen, heißt, ihn zum Leben zu erwecken. Es kann auch bedeuten, den Hörer in die Geschichte zu ziehen. Diese beiden Bewegungen ergeben eine spannende Atmos&shy;phäre. Ich erlebe das bei der kleinen intimen Lesung in einem Café, genauso wie auf der großen Bühne. Auch gelesen als Hörbuch nur für die eigenen Ohren bestimmt.</p>
        <a href="#">Referenzen</a>
      </div> 
    </div>
  </div>

  <div id="redner" class="sticky row other fade-in full_height">
    <div class="row">
      <div class="col-md-6" id="overflow">
        <h1 class="text-center">Ryo Takeda hält Reden</h1>
        <p class="h2">„Es braucht nicht viel, aber das wenige muss gut sein“ pflegt mein Vater zu sagen – anders ausgedrückt: Das gesprochene Wort muss gut gewählt sein. Oft fängt er mit einem kleinen Gedicht oder Zitat den Moment auf wunder&shy;bare Weise ein.</p>
        <p class="h2">In dieser Tra&shy;dition habe ich als freier Redner schon die unter&shy;schied&shy;lichsten An&shy;lässe be&shy;glei&shy;ten dürfen. Von runden Ge&shy;burts&shy;tagen und feier&shy;lichen Er&shy;öff&shy;nungen in Reim&shy;form bis hin zur freien Trau&shy;rede für Braut&shy;paar und Hoch&shy;eits&shy;gäste. Doch nicht nur die freudigen Er&shy;eig&shy;nisse des Lebens, auch die leisen und trau&shy;rigen Töne gehören natürlich dazu. JA-Wort geben, eine stande&shy;samtliche Ehe&shy;schließung ersetzt die freie Trauung allerdings nicht.</p>
      </div>
      <div class="col-md-6 fullBG" style="background-image:url(img/s/RT_Redner.jpg)">

      </div>
    </div>
  </div>

我只想让它上下移动:

 <div class="col-md-6" id="overflow">
        <h1 class="text-center">Ryo Takeda hält Reden</h1>
        <p class="h2">„Es braucht nicht viel, aber das wenige muss gut sein“ pflegt mein Vater zu sagen – anders ausgedrückt: Das gesprochene Wort muss gut gewählt sein. Oft fängt er mit einem kleinen Gedicht oder Zitat den Moment auf wunder&shy;bare Weise ein.</p>
        <p class="h2">In dieser Tra&shy;dition habe ich als freier Redner schon die unter&shy;schied&shy;lichsten An&shy;lässe be&shy;glei&shy;ten dürfen. Von runden Ge&shy;burts&shy;tagen und feier&shy;lichen Er&shy;öff&shy;nungen in Reim&shy;form bis hin zur freien Trau&shy;rede für Braut&shy;paar und Hoch&shy;eits&shy;gäste. Doch nicht nur die freudigen Er&shy;eig&shy;nisse des Lebens, auch die leisen und trau&shy;rigen Töne gehören natürlich dazu. JA-Wort geben, eine stande&shy;samtliche Ehe&shy;schließung ersetzt die freie Trauung allerdings nicht.</p>
      </div>

1 个答案:

答案 0 :(得分:0)

这是一个小脚本,演示了如何使用jQuery检测鼠标滚轮向上/向下滚动并根据其执行功能:

$(document).ready(function(){
  $(document).bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 > 0) {
      $('#textbox').animate({
        'marginLeft' : "+=30px" //moves left
      });
    }
    else {
      $('#textbox').animate({
        'marginLeft' : "-=30px" //moves left
      });
    }
  });
});

演示:https://jsfiddle.net/0xynbdvc/