如何定义js鼠标滚动事件,实现浮动页面的卷帘收起效果

cg错过 发布于 2016/04/28 20:52
阅读 504
收藏 0

最近敲代码遇到个效果实现不了。

具体需要实现的效果是这样:

1.网页加载完成后,浮动div页面的不出现滚动条,当浮动页面收起时(或高度缩小到原来的一半时),滚动条便出现;

2.这只是重复第一点中的,要实现浮动div缩小高度,当然除了浮动div正在随着鼠标的向下滚动,div高度进行缩小时,整个网页页面不能动;

3.当浮动div高度缩小到0时,若鼠标向上滚动,可使浮动div高度逐渐恢复,若鼠标向下滚动,页面正常滚动

先将图片中的三种颜色从上到下依次排序为1.2.3

1页面也就是灰色页面为浮动页面,这里为了更明显而未全屏,2和3页面可以理解为存在1页面之下的,当1页面消失时(即高度为0),2和3页面可以实现正常滚动效果

加载中
0
cg错过
cg错过
下面是我的未完成的代码,
<!DOCTYPE html
<html lang="en"
<head>  <meta charset="UTF-8"
 <title>浮动页面</title>
  <style>  *{ padding:0px;  margin: 0px;  } body{ background-color: #33495e;  
#div_top{ width:100%;  height: 680px;  background-color: #16c4a1;  
#div_center{ width: 100%;  height: 400px;  background-color: burlywood;  
#div_top_cover{ width: 100%;  height:600px;  background-color: #999999;  position: absolute;  top: 0px;  
</style> 
 <script>  
function zoomDemo(e) { 
    var divCover = document.getElementById("div_top_cover")
    var divCH = divCover.offsetHeight;  
    e.style.overflow = "hidden"
//            alert(divCH);  
    if(event.wheelDelta < 0){ 
//                 alert("down"); 
         divCover.style.height = divCH - 10*(-event.wheelDelta / 60) + "px"
//                 alert(divCover.style.height); 
     }else{ //                 alert("up");
      if(divCH < 600){
divCover.style.height = divCH + 10*(event.wheelDelta / 60) + "px"
         
//                 alert(divCover.style.height); 
 }
            e.scrollTop = 0
//            unmove(e);  
//        var unmove=function(e){ 
   //            e.preventDefault && e.preventDefault();
     //            e.returnValue=false;
     //            e.stopPropagation && e.stopPropagation();
     //            return false; //        };
  </script> 
</head> 
<body id="body_content" onmousewheel = zoomDemo(this)
 <div id="div_top">   </div>
  <div id="div_center">   </div>  
<div id="div_top_cover">   </div>
 </body> 
</html>

思路就是这样 ,网上的搜索到的方法大多数是使用zoom对象来缩放的,但对zoom不了解,,,

返回顶部
顶部