本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

wheel

var currentShowPageIndex = 0;

var animateTimeout = null;

var isWheelAnimating = false;

var isWheelUp = function(event) {

event = event || window.event;

var up = true;

if(event.wheelDelta){//IE/Opera/Chrome

up = event.wheelDelta / 120 == 1 ? true : false;

}else{//Firefox

up = event.detail / 3 == 1 ? true : false;

}

return up;

}

var changeBar = function(prevIndex, index) {

var barUl = document.getElementById('barUl');

var barLiList = barUl.getElementsByTagName('li');

barLiList[prevIndex].className = "";

barLiList[index].className = "active";

}

var changePage = function(pageIndex) {

var showPageUl = document.getElementById('wheelUl');

changeBar(currentShowPageIndex, pageIndex);

currentShowPageIndex = pageIndex;

var left = -(currentShowPageIndex) * 1000;

showPageUl.style.marginLeft = left + "px";

return;

}

var animate = function(obj, mode, from, to){

if(animateTimeout) {

clearTimeout(animateTimeout);

}

if(mode == "left") {

if(from > to) {

from = from - 50;

obj.style.marginLeft = (from) + "px";

setTimeout(function(){

animate(obj, mode, from, to);

}, 30);

} else {

isWheelAnimating = false;

}

return;

}

if(from < to) {

from = from + 50;

obj.style.marginLeft = (from) + "px";

setTimeout(function(){

animate(obj, mode, from, to);

}, 30);

} else {

isWheelAnimating = false;

}

}

var mouseWheel = function(event) {

if(isWheelAnimating) {

return;

}

isWheelAnimating = true;

var wheelUp = isWheelUp(event);

var showPageUl = document.getElementById('wheelUl');

var showPageUlWidth = parseInt(showPageUl.offsetWidth);

var showPageLiList = showPageUl.getElementsByTagName('li');

var showPageLiListLength = showPageLiList.length;

var wheelWrapperLeft = parseInt(document.getElementById('wheelWrapper').offsetLeft);

if(wheelUp && currentShowPageIndex < showPageLiListLength - 1) {

changeBar(currentShowPageIndex, currentShowPageIndex + 1);

currentShowPageIndex ++;

var left = -(currentShowPageIndex) * 1000;

//animate(showPageUl, "right", -(currentShowPageIndex - 1) * 1000, -(currentShowPageIndex - 1) * 1000);

var from = -(currentShowPageIndex - 1) * 1000;

var to = -(currentShowPageIndex) * 1000;

animate(showPageUl, "left", from, to);

return;

}

if(!wheelUp && currentShowPageIndex > 0) {

changeBar(currentShowPageIndex, currentShowPageIndex - 1);

currentShowPageIndex --;

var from = -(currentShowPageIndex + 1) * 1000;

var to = -(currentShowPageIndex) * 1000;

animate(showPageUl, "right", from, to);

return;

}

isWheelAnimating = false;

};

if(document.addEventListener){

document.addEventListener('DOMMouseScroll',function(event) { mouseWheel(event); },false);

}

document.onmousewheel = function(event) { mouseWheel(event); }

window.onload = function(){

var barUl = document.getElementById('barUl');

var barLiList = barUl.getElementsByTagName('li');

for(var i=0,length=barLiList.length; i

(function(index){

barLiList[index].onclick = function(){

changePage(index);

};

})(i);

}

}

body { background:#494949; margin:0; }

ul { list-style:none; margin:0; padding:0; }

li { float:left;}

#wheelWrapper {

width:1000px; height:550px; margin:0 auto;

position:fixed; left:50%; margin-left:-505px;

bottom:50px; overflow:hidden;

}

#wheelUl {

width:5050px; height:500px;

}

#barUl {

clear:both; margin:0 auto; width:550px;

margin-top:20px; line-height:25px;

}

#barUl>li {

width:100px; background:orange;

height:25px; margin-right:10px;

border-radius:5px; text-align:center;

-webkit-border-radius:5px;

-moz-border-radius:5px;

}

#barUl>li:hover {

background:#C36C12;

}

#barUl>li[class=active] {

background:#C36C12;

}

#wheelUl>li { width:1000px; }

.wheel {

width:994px; height:500px; background:#FAAA3C;

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

margin:0 auto;

line-height:300px;

font-size:100px;

text-align:center;

}

.radius {

border-radius:3px;

-webkit-border-radius:3px;

-moz-border-radius:3px;

}

h1 { text-align:center; color:#fff; }

ie8+,chrome,ff提供支持

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

希望本文所述对大家jQuery程序设计有所帮助。