Native JavaScript implements mouse wheel scrolling page effect

HTML section:

<div id= "GP" > <div id= "gunping" > <div class= "Page1 page" >1</div> <div class= "page 2 Page ">2</div> <div class=" Page3 page ">3</div> <div class=" Page4 page ">4</div > <div class= "Page5 page" >5</div> <div class= "Page6 page" >6</div> </div> </div>

CSS section:

HTML, body {padding:0; margin:0; overflow:hidden;} #gp {width:100%; text-align:center; font-size:100px; overflow:hidden;} #gunping {width:100%; position:absolute; top:0; left:0;}. page {width:100%;}. Page1 {background: #f00000;}. Page2 {background: #0ff000;}. Page3 {background: #00f0f0;}. page4 {background: #f00f00;}. page5 {background: #f000f0;}. Page6 {background: #0000ff;}

JS section:

Function getstyle (obj, attr) { return obj.currentstyle?obj.currentstyle[attr]: getComputedStyle (Obj, false) [attr];} Function startmove (obj,attr,itarget) { var ispeed = 0; var sty = 0 ;  clearinterval (Obj.timer);  obj.timer = setinterval (function () {  sty =  parseint (GetStyle (obj,attr));  ispeed =  (itarget - sty)/7;   Ispeed = ispeed>0? Math.ceil (ispeed): Math.floor (Ispeed);   if (Math.Abs (itarget - sty) >3) {    obj.style[attr] = sty + ispeed +  ' px ';  }else{    Clearinterval (Obj.timer);   obj.style[attr] = itarget +  ' px ';   }  },30);} Get ClassName compatible Iefunction getclassname (tag, classname) { if (document.getelementsbyclassname) {   return document.getelementsbyclassname (ClassName); }else{  var rel = [];  var nodes =  document.getElementsByTagName (tag);   for (var i=0; i<nodes.length; i++) {    var tagclassname = nodes[i].classname.split (/\s+/);    for (var j =0; j<tagclassname.length; j++) {    if (tagclassname[j] == classname ) {     rel.push (nodes[i]);     break;     }   }  }  return rel; }}function gunping () { var  adiv = document.getelementbyid (' GP ');  var odiv = document.getelementbyid (' Gunping ');  var odiv_div = getclassname (' div ',  ' page ');  var aheight =  document.documentelement.clientheight; var inum = 0;  fnheight ();  // Page height  function fnheight () {&NBSP;&NBSp;for (var i=0; i<odiv_div.length; i++) {   odiv_div[i].style.height =  aHeight +  ' px ';  }  adiv.style.height = aheight +  ' px ' ;  } //ff Roller Event  if (document.addeventlistener) {  document.addeventlistener (' Dommousescroll ', scrollfunc,false);  } //ie Roller Events  document.onmousewheel = scrollFunc;   function scrollfunc (e) {  e = e | |  window.event;  if (e.wheeldelta<0 | |  e.detail>0) {   if (inum > -odiv_div.length+1) {     Inum--;   }  }else{   if (inum<0) {    inum++    }  }  startmove (Odiv, ' top ', inum*aheight);  }  //changing window size  window.onresize = function () {  aheight =  Document.documentelement.clientheight;  fNheight ();  odiv.style.top = inum*aheight +  ' px ';  } }window.onload  = function () { gunping ();}

Native JavaScript implements mouse wheel scrolling page effect