纯JS 全屏滚动 / 整屏翻页

http://blog.csdn.net/tangdou5682/article/details/52351404

在线演示

http://ftp592347.host584.zhujiwu.me/js-fullpage/index.html

知识点总结

  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

                    
                    

你可能感兴趣的:(Javascript)