js实现的鼠标滚轮滚动切换页面效果（类似360默认页面滚动切换效果）

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

具体代码如下：

<！DOCTYPE html><html> <head><title>wheel</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script type="text/javascript" > 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<length; i++） { （function（index）{barLiList[index].onclick = function（）{ changePage（index）;}; }）（i）;} }</script><style type="text/css" > 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; }</style> </head> <body id="body"><h1 >ie8+,chrome,ff提供支持</h1><div id="wrapper"> <div id="wheelWrapper"><ul id="wheelUl" > <li ><div class="wheel"> 1_page1</div> </li> <li ><div class="wheel"> 2_page2</div> </li> <li ><div class="wheel"> 3_page3</div> </li> <li ><div class="wheel"> 4_page4</div> </li> <li ><div class="wheel"> 5_page5</div> </li></ul><ul id="barUl"> <li class="active">1 </li> <li>2 </li> <li>3 </li> <li>4 </li> <li>5 </li></ul> </div></div> </body></html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。