全屏滚动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
}
.box {
width: 100%;
height:100%;
background: url(img/1.jpg);
background-position: center;
background-size: cover;
}
.btn {
position: fixed;
left: 60px;
bottom: 200px;
width: 40px;
height: 150px;
}
.btn ul li{
list-style: none;
width: 15px;
height: 15px;
border: 2px solid #fff;
border-radius: 50%;
margin-top: 15px;
}
.btn ul li.active{
background: #fff;
}
</style>
</head>
<body>
<div class="box "></div>
<div class="box" style="background: url(img/2.jpg);"></div>
<div class="box" style="background: url(img/3.jpg);"></div>
<div class="box" style="background: url(img/4.jpg);"></div>
<div class="btn">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
var h=$('body').height();
var n=0; //初始值
var nowTime=new Date(); //获取当前时间
// 分割时间.解决animate bug问题
$(document).mousewheel(function(ev,dr){
if(new Date()-nowTime>1000)
{
nowTime=new Date();
if(dr<0){ //向下滚动
n++;
if(n>3){
n=0;
}
}else{ //向上滚动
n--;
if(n<0){
n=3;
}
}
console.log(n*h);
//自定义动画 scrollTop 当前滚动条的高度
$('html,body').animate({'scrollTop':n*h+"px"},500);
$('.btn ul li').eq(n).addClass("active").siblings().removeClass("active");
}
})
//当页面刷新的时候。把滚动条的位置改变的0
setTimeout(function(){
$(document).scrollTop(0)
})
</script>
</html>
//封装mousewheel.js
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);
浙公网安备 33010602011771号