网站建设   网站建设技术   网页设计   html/css  

js鼠标滚动滑动一屏代码

人浏览  发布时间:2021-10-08

!DOCTYPE html style html, body { height:100%; } body { margin:0px; } div { height:100%; font-size:60; text-align:center } /style body script addEventListener(DOMContentLoaded,function(){ var body=document.body,html=document.documentElement; var itv,height=document.body.offsetHeight; var page=scrollTop()/height|0; //窗口大小改变事件 addEventListener(resize,onresize),onresize(); //滚轮事件 document.body.addEventListener( onwheel in document?wheel:mousewheel, function(e){ clearTimeout(itv); itv=setTimeout(function(){ var delta=e.wheelDelta/120||-e.deltaY/3; page-=delta; var max=(document.body.scrollHeight/height|0)-1; if(page0)return page=0; if(pagemax)return page=max; move(); },100); e.preventDefault(); } ); //平滑滚动 function move(){ var value=height*page; var diff=scrollTop()-value; (function callee(){ diff=diff/1.2|0; scrollTop(value+diff); if(diff)itv=setTimeout(callee,16); })(); }; //resize事件 function onresize(){ height=body.offsetHeight; move(); }; //获取或设置scrollTop function scrollTop(v){ if(v==nu...
<!DOCTYPE html>
<style>
html, body {
height:100%;
}
body {
margin:0px;
}
div {
height:100%;
font-size:60;
text-align:center
 
}
</style>
<body>
<script>
addEventListener("DOMContentLoaded",function(){
  var body=document.body,html=document.documentElement;
  var itv,height=document.body.offsetHeight;
  var page=scrollTop()/height|0;
  //窗口大小改变事件
  addEventListener("resize",onresize),onresize();
  //滚轮事件
  document.body.addEventListener(
    "onwheel" in document?"wheel":"mousewheel",
    function(e){
      clearTimeout(itv);
      itv=setTimeout(function(){
        var delta=e.wheelDelta/120||-e.deltaY/3;
        page-=delta;
        var max=(document.body.scrollHeight/height|0)-1;
        if(page<0)return page=0;
        if(page>max)return page=max;
        move();
      },100);
      e.preventDefault();
    }
  );
  //平滑滚动
  function move(){
    var value=height*page;
    var diff=scrollTop()-value;
    (function callee(){
      diff=diff/1.2|0;
      scrollTop(value+diff);
      if(diff)itv=setTimeout(callee,16);
    })();
  };
  //resize事件
  function onresize(){
    height=body.offsetHeight;
    move();
  };
  //获取或设置scrollTop
  function scrollTop(v){
    if(v==null)return Math.max(body.scrollTop,html.scrollTop);
    else body.scrollTop=html.scrollTop=v;
  };
});
</script>
<div style="background:#FEE;">1</div>
<div style="background:#EFE;">2</div>
<div style="background:#EEF;">3</div>
<div style="background:#FEE;">4</div>
<div style="background:#EFE;">5</div>
<div style="background:#EEF;">6</div>
</body>
</html>
 
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图