原生javascript实现鼠标滚轮滚动页面效果

标签：

html部分：

<div id="gp">
 <div id="gunping">
        <div class="page1 page">1</div>
        <div class="page2 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部分：

 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部分：

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);
}
//获取className兼容ie
function 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();
 //页面高度
 function fnHeight(){
  for(var i=0; i<oDiv_div.length; i++){
   oDiv_div[i].style.height = aHeight + ‘px‘;
  }
  aDiv.style.height = aHeight + ‘px‘;
 }
 //ff滚轮事件
 if(document.addEventListener){
  document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false);
 }
 //ie滚轮事件
 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);
 }
 
 //改变窗口大小
 window.onresize = function(){
  aHeight = document.documentElement.clientHeight;
  fnHeight();
  oDiv.style.top = iNum*aHeight + ‘px‘;
 }
 
}
window.onload = function(){
 gunPing();
}

原生javascript实现鼠标滚轮滚动页面效果

标签：

原文地址：http://my.oschina.net/u/2360886/blog/414436