html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...

迈不过友情╰ 2022-10-05 13:50 281阅读 0赞

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

运行效果截图如下：

![d74828df84515fb7cc32f17a8631178c.png][]

![20e46684aeb68622de861beb59dcb65f.png][]

具体代码如下：

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提供支持 #

*  1\_page1
 *  2\_page2
 *  3\_page3
 *  4\_page4
 *  5\_page5

*  1
 *  2
 *  3
 *  4
 *  5

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

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

[d74828df84515fb7cc32f17a8631178c.png]: /images/20221005/dba73294a06b4765a6e7bf5aa721d9b7.png
[20e46684aeb68622de861beb59dcb65f.png]: /images/20221005/aabbdc48f4a44d7bae8c8d601805d33e.png

html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关滚动鼠标/滑动触摸板切换图片

相关页面实现类似新闻滚动效果

相关 vue实现简单的鼠标拖拽滚动效果

相关 html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

相关 jquery随机新闻滚动切换效果

相关纯css，div隐藏滚动条，保留鼠标滚动效果。

相关 vue页面切换到滚动页面显示顶部

相关鼠标滚轮事件以及满屏滚动实现

相关 js鼠标滚轮滚动图片切换效果