<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<title>鼠标滚动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
.initBody {
height: 100%;
overflow: hidden;
position: relative;
z-index: 100;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: red;
}
.section {
background-color: #f1f1f1;
font-size: 150px;
line-height: 200px;
text-align: center;
}
.section_1 {
background-color: red
}
.section_2 {
background-color: blue
}
.section_3 {
background-color: green
}
.page {
width: 15px;
position: fixed;
right: 20px;
top: 20%;
color: #fff;
}
.page li a {
display: block;
}
.page li span {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
background-color: #fff;
text-indent: -9999em;
margin-top: 15px;
margin-left: 1px;
cursor: pointer;
}
.page li.active span {
margin-left: 0px;
border: 1px solid #fff;
width: 7px;
height: 7px;
background: blue;
}
.wheel {
background-color: #336699;
}
.wrapper {
overflow: hidden;
}
/*添加头部和底部*/
#header {
height: 200px;
background-color: dodgerblue;
}
#header {
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!--header-->
<p id="header">
</p>
<p class="wheel">
<p class="section">视图一</p>
<p class="section">视图二</p>
<p class="section">视图三</p>
<p class="section">视图四</p>
</p>
<!--botton-->
<p id="botton">
</p>
</body>
<script type="text/javascript">
(function(a, window, undefined) {
var supportsTransitions = (function() {
var s = document.documentElement.style || document.body.style,
v = ['ms', 'O', 'Moz', 'Webkit'];
if(s.transition === '') {
return true;
}
while(v.length) {
if(v.pop() + 'Transition' in s) {
return true;
}
return false;
}
})();
a.fn.mouseWheel = function(option) {
var _this = $(this),
winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight,
section = _this.children('.section'),
index = 0,
lastAnimation = 0,
wrap;
var defaults = {
onload: null,
orident: 'vertical',
keybord: true,
ease: 'linear',
speend: 1000,
quietPeriod: 300 // 滚动事件停滞时间，数值越大阻尼感越强
}
var opt = $.extend({}, defaults, option);
section.each(function(i, n) {
$(n).addClass('section_' + parseInt(i + 1));
$(n).css({
width: winW,
height: winH
});
$('body,html').addClass('initBody')
});
$(this).wrap('<p class="wrapper"></p>');
$('.wrapper').css({
width: winW,
height: winH,
'position': 'relative'
});
if(section.length > 1) {
$('<ul class="page"></ul>').appendTo('.wrapper');
if(supportsTransitions) {
_this.css({
'transform': 'translate3d(0,0,0)',
'transition': 'all ' + opt.speend + 'ms'
})
} else {
_this.css({
width: winW,
height: winH,
'position': 'absolute',
'left': 0
}).animate({
top: 0
}, opt.speend)
}
for(var i = 0; i < section.length; i++) {
var li = document.createElement('li');
var t = i + 1;
li.innerHTML = '<a href=#section_' + t + ' data-index=index_' + t + '><span>' + t + '</span></a>';
$('.page')[0].appendChild(li);
};
$('.page').find('li').first().addClass('active');
var pageH = $('.page')[0].offsetHeight;
$('.page').css({
'height': pageH,
'margin-top': -pageH / 2
});
$('.page').find('li').on('click', function() {
var aa = $(this);
var hash = aa.find('a').attr('href').split('#')[1];
//console.log(hash)
aa.addClass('active').siblings().removeClass('active')
index = aa.index();
moveUp(index)
if(history.replaceState) {
history.pushState({}, document.title, '#' + hash);
} else {
location.hash = hash;
}
})
};
function initScroll(d) {
var timeNow = new Date().getTime();
// 如果跟上次动画的时间差小于停滞时间
if(timeNow - lastAnimation < opt.quietPeriod + opt.speend) {
return;
}
if(d > 0) {
index--;
if(index < 0) {
index = 0;
};
moveUp(index)
} else if(d < 0) {
index++;
if(index > section.length - 1) {
index = section.length - 1;
};
moveUp(index)
};
lastAnimation = timeNow;
}
function moveUp(num) {
var posY = -num * winH + 'px';
$('.page').find('li').removeClass('active').eq(num).addClass('active');
if(opt.orident === 'vertical') {
if(supportsTransitions) {
_this.css({
'-webkit-transform': 'translate3d(0,' + posY + ',0)',
'transform': 'translate3d(0,' + posY + ',0)',
'-webkit-transition': 'all ' + opt.speend + 'ms',
'transition': 'all ' + opt.speend + 'ms'
})
} else {
_this.animate({
top: posY
}, opt.speend)
}
};
_this.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
})
}
$(document).on('mousewheel DOMMouseScroll MozMousePixelScroll', function(e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
e.preventDefault();
initScroll(delta);
})
function windwSize(w, h) {
section.css({
'width': w,
'height': h
});
$('.wrapper').css({
'width': w,
'height': h
});
$('body,html').addClass('initBody')
}
$(window).on('resize', function() {
winW = document.documentElement.clientWidth || document.body.clientWidth;
winH = document.documentElement.clientHeight || document.body.clientHeight;
windwSize(winW, winH)
moveUp(index)
})
if(opt.keybord === true) {
$(document).on('keyup', function(e) {
var key = e.keyCode;
if(key == 38) {
index--;
if(index < 0) {
index = 0;
return
};
moveUp(index)
} else if(key == 40) {
index++;
if(index >= section.length) {
index = section.length;
return;
};
moveUp(index)
}
})
};
}
})(jQuery, window);
var wheels = $('.wheel').mouseWheel()
</script>
</html>
如图当我切换到视图4的时候底部 p 不会显示，还有怎么改变滚动内容的宽高啊？？？
在 CSS 里面并没有看见设置内容宽高的代码
PHP中文网2017-04-11 13:13:13
第一个问题：为什么bottom无法显示——因为你的body元素设置了overflow:hidden（溢出隐藏），去掉就OK了。
第二个问题：怎么改变滚动内容的宽高？没明白你的意思，你是说的滚动条的宽高（样式）还是说的class=wheel的盒子内容？http://blog.csdn.net/fswan/ar...这篇文章你去看看吧，希望有用
