鼠标滚动事件
2017-09-27 15:04
162 查看
<head> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; } .cont { height: 5000px; } #top { position: fixed; width: 100%; height: 50px; top: 0px; left: 0px; background-color: cornflowerblue; display: none; } #left { position: fixed; top: 150px; left: 20px; height: 500px; width: 50px; background-color: lawngreen; display: none; } #left ul{ list-style: none; padding-left:0px ; } #left ul li{ border: 1px solid black; text-align: center; margin-top: 10px; } </style> <script> // var a = 0; //滚动事件 function myScroll() { // a++; var i = document.body.scrollTop; var top = document.getElementById("top"); var left = document.getElementById("left"); var f1 = document.getElementById("f1"); var f2 = document.getElementById("f2"); var f3 = document.getElementById("f3"); var f4 = document.getElementById("f4"); var f5 = document.getElementById("f5"); //控制顶部 if(i >= 1000) { top.style.display = "block"; top.innerHTML = i; } else { top.style.display = "none"; } //控制左侧 if(i >= 2000) { left.style.display = "block"; } else { left.style.display = "none"; } // 显示楼层 if(i >= 2000 && i <= 2500) { f1.className = "a"; f2.className = ""; f3.className = ""; f4.className = ""; f5.className = ""; } else if(i > 2500 && i <= 3000) { f1.className = ""; f2.className = "a"; f3.className = ""; f4.className = ""; f5.className = ""; } else if(i > 3000 && i <= 3500) { f1.className = ""; f2.className = ""; f3.className = "a"; f4.className = ""; f5.className = ""; } else if(i > 3500 && i <= 4000) { f1.className = ""; f2.className = ""; f3.className = ""; f4.className = "a"; f5.className = ""; } else if(i > 4000 && i <= 4500) { f1.className = ""; f2.className = ""; f3.className = ""; f4.className = ""; f5.className = "a"; } } </script> </head> <body onscroll="myScroll()"> <div id="left"> <ul> <li id="f1">F1</li> <li id="f2">F2</li> <li id="f3">F3</li> <li id="f4">F4</li> <li id="f5">F5</li> </ul> </div> <div id="top"></div> <div class="cont"></div> </body>
相关文章推荐
- jQuery滚动事件之鼠标滚动到底部再加载数据
- 关于鼠标滚动滑轮事件
- 配合鼠标滚轮事件的可自定义样式的区域滚动条插件(基于jquery)
- JS鼠标滚动事件
- 鼠标滚动一次window.onscroll事件的函数在firfox与Ie中执行的次数不同问题的处理s
- 绑定鼠标滚轮上下滚动事件
- javascript鼠标滚动事件中出现的问题
- 给DBGrid添加鼠标滚动事件
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
- jquery监听鼠标滚轮(滚动)事件
- 关于浏览器兼容的问题以及字符串编码的一个坑,鼠标滚动事件mousewheel和DOMMouseScroll
- flex鼠标滚轮事件(鼠标滚动后,数字变换)
- js整频滚动展示效果(函数节流鼠标滚轮事件)
- dbgrid鼠标滚动事件
- 鼠标滚动事件onscroll在firefox/chrome/Ie中执行次数的问题处理
- jQuery滚动事件之鼠标滚动到底部再加载数据
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
- 给浏览器绑定鼠标滚动事件(兼容FireFox)
- 给DBGrid添加鼠标滚动事件
- 鼠标滚动事件