線上演示

知識點總結

1. 當需要製作轉動滑鼠滾輪放大頁面字型這樣的互動效果時，會用到 Mousewheel 事件。其實在大多數瀏覽器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 卻不支援此事件，不過慶幸 Firefox 3.5+ 中提供了另外一個等同的事件：”DOMMouseScroll”
2. mousewheel事件中的 “event.wheelDelta” 屬性值：返回的如果是正值說明滾輪是向上滾動；
3. DOMMouseScroll事件中的 “event.detail” 屬性值：返回的如果是負值說明滾輪是向上滾動

html程式碼

<div id="wrap">
    <div id="main">
        <div id="page1" class="page"></div>
        <div id="page2" class="page"></div>
        <div id="page3" class="page"></div>
        <div id="page4" class="page"></div>
    </div>
</div
 
>

css

<style type="text/css">
html,body{
    height:100%;
}
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
#wrap{
    overflow: hidden;
    width:100%;
}
#main{
    height:2944px;
    top:0;
    position: relative;
}
.page{
    width:100%;
    margin:0;
}
#page1{
    background:#E4E6CE
 
;
}
#page2{
    background:#6CE26C;
}
#page3{
    background:#BF4938;
}
#page4{
    background:#2932E1;
}
</style>

javascritpt

<script type="text/javascript">
    var wrap = document.getElementById("wrap");
    var main = document.getElementById("main");
    var hei = document.body.clientHeight;
    wrap.style.height = hei + "px";
    var obj = document.getElementsByTagName("div");
    for(var i=0;i<obj.length;i++){
        if(obj[i].className == 'page'){
             obj[i].style.height = hei + "px";
        }
    }
    //如果不加時間控制，滾動會過度靈敏，一次翻好幾屏
    var startTime = 0, //翻屏起始時間  
        endTime = 0,  
        now = 0;     
    //瀏覽器相容      
    if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
        document.addEventListener("DOMMouseScroll",scrollFun,false);        
    }  
    else if (document.addEventListener) {  
        document.addEventListener("mousewheel",scrollFun,false);  
    }  
    else if (document.attachEvent) {  
        document.attachEvent("onmousewheel",scrollFun);   
    }  
    else{  
        document.onmousewheel = scrollFun;  
    }  

    //滾動事件處理函式
    function scrollFun(event){
        startTime = new Date().getTime();  
        var delta = event.detail || (-event.wheelDelta);  
        //mousewheel事件中的 “event.wheelDelta” 屬性值：返回的如果是正值說明滾輪是向上滾動
        //DOMMouseScroll事件中的 “event.detail” 屬性值：返回的如果是負值說明滾輪是向上滾動
        if ((endTime - startTime) < -1000){
            if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){
                //向下滾動
                now = now - hei;
                toPage(now);
        } 
            if(delta<0 && parseInt(main.offsetTop) < 0){
                //向上滾動
                    now = now + hei;
                    toPage(now);
            }
             endTime = new Date().getTime();  
        }
           else{  
                event.preventDefault();    
            }    
    }
     function toPage(now){        
         $("#main").animate({top:(now+'px')},1000);     //jquery實現動畫效果
         //setTimeout("main.style.top = now + 'px'",1000);     javascript 實現動畫效果
    }   
</script>

請認真看註釋和知識點，有什麼問題或建議，歡迎留言^V^