時間：2024-01-29 06:05:02 | 來源：網(wǎng)站運營
時間：2024-01-29 06:05:02 來源：網(wǎng)站運營
請問這個網(wǎng)頁效果怎樣做？：監(jiān)聽鼠標滾輪時間，計算每次滾動的距離，切換div2和div1的scrollTop即可。相關的數(shù)值高度可能需要按需計算大小后得到
在線咨詢
<!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，正負方向也相反, 為了統(tǒng)一乘以-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"); //鼠標滾輪向下為負數(shù) 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>
關鍵詞：效果,怎樣,請問
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
