的jQuery移动鼠标的滚动按钮,内容

问题描述:

我有对基本逻辑代码这一说法,并希望在我的项目实施具体的和平:的jQuery移动鼠标的滚动按钮,内容

<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> 

这里有一个小脚本演示了如何使用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/