Ich möchte, dass .. Mausrad Ereignis Verzögerungich, dass „Mausrad Ereignis Verzögerung“ wollen

Beispiel ... Ich betreibe wheeldown..so change „bg_02“. aber bg_05 ändern .. so will ich ein Wheeldown und ändern verzögern bg_01 -> bg_02 ein Wheeldown und ändern bg_02 -> bg_03 ... jetzt als Wheeldown Änderung bg_01 -> bg_04 oder Wheeldown zählen ++

leid, mein Englisch ist wenig

Skript

// Wheel 
function wheel(){ 
if (event.wheelDelta >= 120){ 
    wheelUp(); 
    return; 
} 
else if (event.wheelDelta <= -120){ 
    wheelDown(); 

} 
    } 
    var bgSpot = $('.bg_spot'); 
    var bgSpot_Cnt = bgSpot.length; 
    bgSpot.eq(0).addClass('spot_on').css('top','0'); 

    // Down 
    function wheelDown(i){ 
    $('.spot_on').addClass('move_top'); 
    $('.spot_on').next().css('top','0'); 
    $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on'); 
    }

CSS

.bg_spot{position:fixed;top:100%;right:0;bottom:0;left:0;z-index:10;width:100%;height:100%; 
-webkit-transition: 0.6s ease; 
-moz-transition: 0.6s ease; 
-o-transition: 0.6s ease; 
transition: 0.6s ease;} 

.move_top{ 
-webkit-transform: translate3d(0,-100%,0); 
-moz-transform: translate3d(0,-100%,0); 
-o-transform: translate3d(0,-100%,0); 
transform: translate3d(0,-100%,0);} 

.move_stage{ 
-webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);} 

.top_0{top:0} 
.bg_01{background:#ccc;} 
.bg_02{background:#000;} 
.bg_03{background:olive;} 
.bg_04{background:green}

HTML

<body onmousewheel="wheel();"> 
    <div class="bg_spot bg_01">&nbsp;</div> 
    <div class="bg_spot bg_02">&nbsp;</div> 
    <div class="bg_spot bg_03">&nbsp;</div> 
    <div class="bg_spot bg_04">&nbsp;</div> 
    </body>

Quelle

2016-04-22 Keen

haben Sie darüber nachgedacht, mit Event.preventDefault() die Standard-Scrolling-Action und die scrollTo() -Methode zu verhindern, dass Ihre eigene Rolle im Schritt angeben? –

Danke aber kann das Problem nicht lösen – Keen

geändert Ihre CSS und JavaScript. Besuche die Schnipsel

function wheel() { 
 
    if (event.wheelDelta >= 120) { 
 
     // wheelUp(); 
 
     return; 
 
    } else if (event.wheelDelta <= -120) { 
 
     wheelDown(); 
 

 
    } 
 
    } 
 
    //  var bgSpot = $('.bg_spot'); 
 
    //  var bgSpot_Cnt = bgSpot.length; 
 
    //  bgSpot.eq(0).addClass('spot_on').css('top', '0'); 
 

 
// Down 
 
var i = 1, 
 
    j = 0; 
 

 
function wheelDown() { 
 

 
    $('.bg_spot').hide(); 
 

 

 
    $('.bg_0' + i).show(); 
 

 
    // $('.spot_on').addClass('move_top'); 
 
    // $('.spot_on').next().css('top', '0'); 
 
    // $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on'); 
 

 
    i++; 
 
    if (i > 4) 
 
    i = 1; 
 
}

.bg_spot { 
 

 

 
    overflow: hidden; 
 

 

 
    position: absolute; 
 

 

 
    right: 0; 
 

 

 
    left: 0; 
 

 

 
    z-index: 10; 
 

 

 
    width: 100%; 
 

 

 
    height: 100%; 
 

 

 
    -webkit-transition: 0.6s ease; 
 

 

 
    -moz-transition: 0.6s ease; 
 

 

 
    -o-transition: 0.6s ease; 
 

 

 
    transition: 0.6s ease; 
 

 

 
    display: none; 
 

 

 
} 
 

 

 
.move_top { 
 

 

 
    -webkit-transform: translate3d(0, -100%, 0); 
 

 

 
    -moz-transform: translate3d(0, -100%, 0); 
 

 

 
    -o-transform: translate3d(0, -100%, 0); 
 

 

 
    transform: translate3d(0, -100%, 0); 
 

 

 
} 
 

 

 
.move_stage { 
 

 

 
    -webkit-transform: translate3d(0, 0, 0); 
 

 

 
    -moz-transform: translate3d(0, 0, 0); 
 

 

 
    -o-transform: translate3d(0, 0, 0); 
 

 

 
    transform: translate3d(0, 0, 0); 
 

 

 
} 
 

 

 
.top_0 { 
 

 

 
    top: 0 
 

 

 
} 
 

 

 
.bg_01 { 
 

 

 
    background: #ccc; 
 

 

 
} 
 

 

 
.bg_02 { 
 

 

 
    background: #000; 
 

 

 
} 
 

 

 
.bg_03 { 
 

 

 
    background: olive; 
 

 

 
} 
 

 

 
.bg_04 { 
 

 

 
    background: green 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body onmousewheel="wheel();"> 
 
    <div class="bg_spot bg_01" style="display:block;"> 
 
    &nbsp;</div> 
 
    <div class="bg_spot bg_02"> 
 
    &nbsp;</div> 
 
    <div class="bg_spot bg_03"> 
 
    &nbsp;</div> 
 
    <div class="bg_spot bg_04"> 
 
    &nbsp;</div> 
 
</body>

Quelle

2016-04-22 09:00:57

ich, dass „Mausrad Ereignis Verzögerung“ wollen

Skript

CSS

HTML

Antwort

Verwandte Themen