时间：2024-01-29 06:05:02 | 来源：网站运营
时间：2024-01-29 06:05:02 来源：网站运营
请问这个网页效果怎样做？：监听鼠标滚轮时间，计算每次滚动的距离，切换div2和div1的scrollTop即可。相关的数值高度可能需要按需计算大小后得到
在线咨询
<!DOCTYPE HTML><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Scroll</title> <style> div{ padding: 0; margin:0; border: 1px solid #000000; } #div1{ color: green; } #div2{ color: yellow; } .content, .navi{ float: left; height: 100px; width: 100px; overflow: hidden; } .navi_item{ margin: 5px; } .navi_item_current{ background: red; } </style> </head> <body> <div id="div1" class="content"> 1 <br>2 <br>3 <br>4 <br>5 <br>6 <br>7 <br> 8 <br>9 <br>10 <br>11 <br>12 <br>13 <br>14 <br> 15 </div> <div id="div2" class="content"> 1 <br>2 <br>3 <br>4 <br>5 <br>6 <br>7 <br> 8 <br>9 <br>10 <br>11 <br>12 <br>13 <br>14 <br> 15 </div> <div id="div3" class="navi">div3 <div class="navi_item navi_item_current">div4</div> <div class="navi_item">div5</div> </div> <p>鼠标滚动值<span id="info">0</span></p> <script> //当超过某个伐值时切换导航 var threshold = 200; //鼠标滚轮滚动时每次滚动的距离(px) var range = 10; //记录鼠标滚轮总共的 var currentOffset = 0; var scrollFunc = function(e){ var offset = 0; e = e || window.event; if(e.wheelDelta){//IE/Opera/Chrome offset = e.wheelDelta; }else if(e.detail){//Firefox //firefox 鼠标滚动返回+(-)3，正负方向也相反, 为了统一乘以-40， offset = -e.detail * 40; } document.getElementById("info").innerHTML = offset; navi(offset); } function navi(scrollOffset){ //1表示向下，-1表示向上 var direct = 1; var div2 = document.getElementById("div2"); var div1 = document.getElementById("div1"); var navi = document.getElementById("div3").getElementsByTagName("div"); //鼠标滚轮向下为负数 direct = scrollOffset > 0 ? -1 : 1; currentOffset = currentOffset + direct * range; currentOffset = currentOffset < 0 ? 0 : currentOffset; console.log(currentOffset); if(currentOffset > threshold){ div1.scrollTop = currentOffset - threshold; navi[1].className = "navi_item navi_item_current"; navi[0].className = "navi_item"; }else{ div2.scrollTop = currentOffset; navi[0].className = "navi_item navi_item_current"; navi[1].className = "navi_item"; } } /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari </script> </body></html>
关键词：效果,怎样,请问
