jquery 滚轮插件 示例 - 整屏滚动

在上一篇张写了jquery 滚轮插件 jquery.mousewheel.js，可以根据滚轮上下滚动的事件，触发控制整个屏幕的切换。

正屏滚动的需求

编写通过滚轮上下切换这五个屏幕效果。

要做出这个效果，其实不用说，首先要把这五个div的基本HTML+CSS给写出来先。

准备好五个图片

001.png

002.png

003.png

004.png

005.png

好了，有了这些基本图片之后，就是实现出来啦。

在下面实现代码的时候需要使用定时器来控制函数节流，因为鼠标的滚轮事件触发非常快，必须限制之后才能有较好的体验，概念如下。

函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

实现代码

html

    
    
    
    
    


    

        

            

                

                

                    

                        Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    
                
            
            

                

                    

                        2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                    
                
                

                
            
            

                

                

                    

                        以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
                    
                
            
            

                

                

                    

                        Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                    
                
            
            

                

            
        
    
        
    

        

        

        

        

        

    

css

* {
    margin: 0;
    padding: 0
}

.pages_warper{
    width: 100%;
    background-color: gold;
    overflow: hidden;
    font-size: 14px;
    font-family: "Microsoft Yahei";
}

.pages_warper_inner{
    /*position: absolute;*/
    /*top: 0;*/
    background-color: cyan;
    margin-top: 0;
}

.pages_warper_inner .warper1{background-color: orange;}
.pages_warper_inner .warper2{background-color: lightgreen;}
.pages_warper_inner .warper3{background-color: cyan;}
.pages_warper_inner .warper4{background-color: pink;}
.pages_warper_inner .warper5{background-color: lightblue;}

.pages_warper_inner .page{position: relative;opacity: 0;}

.pages_warper_inner .page .left{width: 50%;height: 100%;position: absolute;}
.pages_warper_inner .page .right{width: 50%;height: 100%;position: absolute;right: 0;}

.pages_warper_inner .warper1 .left{background:url("../images/001.png") left no-repeat;}
.pages_warper_inner .warper1 .right p{margin-top: 30%;margin-left: 50%;width: 70%;text-indent: 28px;line-height: 40px;}

.pages_warper_inner .warper2 .left p{margin-top: 30%;margin-right: 50%;width: 70%;text-indent: 28px;line-height: 40px;}
.pages_warper_inner .warper2 .right{background:url("../images/002.png") left no-repeat;}

.pages_warper_inner .warper3 .left{background:url("../images/003.png") left no-repeat;}
.pages_warper_inner .warper3 .right p{margin-top: 30%;margin-left: 50%;width: 70%;text-indent: 28px;line-height: 40px;}

.pages_warper_inner .warper4 .left{background:url("../images/004.png") left no-repeat;}
.pages_warper_inner .warper4 .right p{margin-top: 30%;margin-left: 50%;width: 70%;text-indent: 28px;line-height: 40px;}

.pages_warper_inner .warper5 .center{height: 100%;background:url("../images/005.png") center no-repeat;transform: rotateZ(0deg);transition: all 3s ease;}

/*ul li 样式*/
ul{
    position: fixed;
    top: 35%;
    right: 3%;
    list-style: none;
}

ul li{
    width: 18px;
    height: 18px;
    border: 1px solid #666;
    border-radius: 100%;
    margin: 10px;
    cursor: pointer;
}

ul .active{
    background-color: #ccc;
}