我有基本逻辑的代码声明,并希望在我的项目中实现:
<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 & 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­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­bare Weise ein.</p>
<p class="h2">In dieser Tra­dition habe ich als freier Redner schon die unter­schied­lichsten An­lässe be­glei­ten dürfen. Von runden Ge­burts­tagen und feier­lichen Er­öff­nungen in Reim­form bis hin zur freien Trau­rede für Braut­paar und Hoch­eits­gäste. Doch nicht nur die freudigen Er­eig­nisse des Lebens, auch die leisen und trau­rigen Töne gehören natürlich dazu. JA-Wort geben, eine stande­samtliche Ehe­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­bare Weise ein.</p>
<p class="h2">In dieser Tra­dition habe ich als freier Redner schon die unter­schied­lichsten An­lässe be­glei­ten dürfen. Von runden Ge­burts­tagen und feier­lichen Er­öff­nungen in Reim­form bis hin zur freien Trau­rede für Braut­paar und Hoch­eits­gäste. Doch nicht nur die freudigen Er­eig­nisse des Lebens, auch die leisen und trau­rigen Töne gehören natürlich dazu. JA-Wort geben, eine stande­samtliche Ehe­schließung ersetzt die freie Trauung allerdings nicht.</p>
</div>
答案 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
});
}
});
});