jQuery整屏滚动

1.jQuery.mousewheel插件使用

jQuery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jQuery的滚轮事件插件
jQuery.mousewheel.js

2.函数节流

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

例子：整屏滚动

    

        

            

                
            
            
日常里，与你相抱
        
    
    

        

            

                
            
            
樱花下，是你的小提琴
        
    
    

        

            

                
            
            
星空下，你我偶遇
        
    
    

        

            

                
            
            
黄昏时，一人独奏
        
    
    

        

            

                
            
            
琴声中，樱花飘扬
        
    
    

        

        

        

        

        

    

CSS文件：

/ CSS Document /
body,ul{
margin: 0; /取消列表和系统自带缩进/
padding: 0;
}
ul{
list-style: none;
}
/父级div/
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/每一页面/
.pages{
height: 768px;
position: relative;
}
/小圆点ul/
.points{
width: 16px;
height: 176px;
position: fixed;
right: 20px;
top: 50%;
margin-top: -88px;
}
/每一个小圆点/
.points li{

width: 13px;
height: 13px;
border-radius: 50%;
margin: 16px 0;
border: 1px solid #666;
cursor: pointer;

}
/jQuery操作类/
.points .active{
background-color: #666666;
}
/页面大小/
.main_con{

width: 1366px;
height: 768px;
position: relative;

}

/页面的图片/
.main_con .left_img{
position: relative;
left: -40px;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/页面的文字/
.main_con .right_info{
width: 40px;
height: 300px;
position: absolute;
left: -50px;
top: 50%;
margin-top: -150px;
font-size: 30px;
color: #666666;
text-align: justify;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/jQuery操作动画/
.moving .main_con .left_img{
left: 0;
opacity: 1;
filter: alpha(opacity=100);

}
.moving .main_con .right_info{
left: 30px;
opacity: 1;
filter: alpha(opacity=100);

}