javascript - I want that "mousewheel event delay" -

-

i want that.. mousewheel event delay

example...i run wheeldown..so change "bg_02". change bg_05.. want delay 1 wheeldown , change bg_01 -> bg_02 1 wheeldown , change bg_02 -> bg_03 ... wheeldown change bg_01 -> bg_04 or wheeldown count ++

sorry english little

script

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

changed css , javascript. check snippet

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


Comments

Post a Comment

Popular posts from this blog

html - Styling progress bar with inline style -

-
i trying set progress bar color red using inline style. need in way because have access <body> part of document. style need apply: progress { color: red } progress::-moz-progress-bar { background: red;} progress::-webkit-progress-value { background: red; } progress[aria-valuenow]:before { background: red; } i tried <progress style="background: red;"> incorrect effect, progress bar color turns blue red background. guide right direction desired style? thank in advance. here live example: https://jsfiddle.net/z36d3f6l/
Read more

java - Oracle Sql developer error: could not install some modules -

-
i have downloaded fresh copy of sqldeveloper ( sqldeveloper-4.1.3.20.78-no-jre ) oracle website. when unzip , lauch gui, keep getting following error message: warning - not install modules: dynamic module config - no module providing capability org.netbeans.netbinox found. my system: windows 7 32 bit hp probook. jdk 1.6 , 1.7, 1.8 available in java/jdk subdirectory. netbeans 8.0.2 installed finally got way out after dirty hours. extracted sqldeveloper zip in nested directory. i.e: e://a/b/c/sqldeveloper. starting sqldeveloper gui above directory threw erros. solution: go in c:\users**username**\appdata\roaming : delete sql developer , sqldeveloper folders extract sql developer zip in new non nested directory. i.e: e:// start , should work now reference: https://community.oracle.com/thread/3870680?start=0&tstart=0
Read more

How to use autoclose brackets in Jupyter notebook? -

-
this may sound silly question, how make use of autoclose brackets in jupyter notebook? example, when type print( jupyter notebook auto-closes brakets print() and places cursor inside. type argument, say print(1 + 1) now cursor between second 1 , right bracket ) . key navigate right of ) ? of course can press end or → or ) achieve this, not seem save time, purpose of brackets autoclose suppose? thanks in advance.
Read more