随鼠标轮动翻动层————jquery小练习
闲来无事在网站上看见一个网页制作的不错,就仿照做来看看。特此记录下来。
亮点:随鼠标上下滚动,展示页面随之不同,翻动效果。
功能点:鼠标向上,向下判断事件。
css 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | html { overflow-y: hidden; } .hide { display: none; } .show { display: block; } .box { height: 650px; width: 100%; } .foot { position: fixed ; height: 100px; top: 150px; right: 0px; } ul li a:link { text-decoration: none; color:gold; } .foot ul li { display: block; width: 50px; height: 30px; border: solid 1px white; padding: 5px; text-align: center; vertical-align: middle; line-height: 30px; cursor: pointer; } .active { color: white; } #red { background-color: brown; } #orange { background-color: burlywood; } #yellow { background-color: yellow; } #green { background-color: green; } #blueness { background-color: chartreuse; } #blue { background-color: blue; } #purple { background-color: darkmagenta; } |
js 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | var index1 = 0; var scrollFunc = function (e) { e = e || window. event ; if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 //alert("滑轮向上滚动"); index1 = $( "ul li a[class=active]" ).parent().index(); console.log(index1); sliderIndex(index1, 0); } else { //当滑轮向下滚动时 //alert("滑轮向下滚动"); index1 = $( "ul li a[class=active]" ).parent().index(); console.log(index1); sliderIndex(index1, 1); } } //} else if (e.detail) { //Firefox滑轮事件 // if (e.detail > 0) { //当滑轮向上滚动时 // alert("滑轮向上滚动"); // } // if (e.detail < 0) { //当滑轮向下滚动时 // alert("滑轮向下滚动"); // } //} } //给页面绑定滑轮滚动事件 //if (document.addEventListener) {//firefox // document.addEventListener('DOMMouseScroll', scrollFunc, false); //} //滚动滑轮触发scrollFunc方法 //ie 谷歌 window.onmousewheel = scrollFunc; function sliderIndex(index, type) { if (index == 0 && type == 0) { alert( "到顶了!" ); } else if (index >= 0) { var num = 0; if (type == 0) { num = index - 1; } else { num = index + 1; } if (num == 7) num = 0; $( ".foot ul li a" ).removeClass( "active" ); $( ".foot ul li a:eq(" + num + ")" ).addClass( "active" ); if (type==0) { $( "#main div:eq(" + num + ")" ).slideDown( "slow" ); } else $( "#main div:eq(" + index + ")" ).slideUp( "slow" ); } } $(function () { $( ".foot ul li a" ).click(function () { $( ".foot ul li a" ).removeClass( "active" ); $( this ).addClass( "active" ); var box = $( this ).attr( "data-id" ); console.log(box); $( "#" + box).slideUp( "slow" ); }) }) |
html 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id= "main" > <div id= "red" class = "box" ></div> <div id= "orange" class = "box" > </div> <div id= "yellow" class = "box" ></div> <div id= "green" class = "box" > </div> <div id= "blueness" class = "box" ></div> <div id= "blue" class = "box" > </div> <div id= "purple" class = "box" ></div> </div> <div class = "foot" > <ul> <li data-id= "red" > <a href= "#red" class = "active" >赤</a> </li> <li data-id= "orange" > <a href= "#orange" >橙 </a></li> <li data-id= "yellow" > <a href= "#yellow" >黄</a> </li> <li data-id= "green" > <a href= "#green" >绿</a> </li> <li data-id= "blueness" > <a href= "#blueness" >青</a> </li> <li data-id= "blue" > <a href= "#blue" >蓝</a> </li> <li data-id= "purple" > <a href= "#purple" >紫</a></li> </ul> </div> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?