<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>整屏滚动</title> <link href="https://www.jb51.net/css/reset.css" > <style> .page_con{ width:100%; /*必须是固定定位，否则会有问题*/ position:fixed; top:0; left:0; overflow: hidden; } .page{ position:relative; } .page .main_con{ width:900px; height:400px; position:absolute; left:50%; top:50%; margin-top:-200px; margin-left:-450px; } .page .main_con .left_img{ width:363px; height:400px; } .page .main_con .left_img,.page .main_con .right_img{ opacity: 0; position: relative; filter:alpha(opacity = 0); transition:all 1s ease 300ms; } .page .main_con .right_info{ width:500px; height:300px; } .page .main_con .right_info,.page .main_con .left_info{ font-size:20px; line-height:50px; color:#666; text-indent:2em; text-align:justify; position:relative; opacity:0; filter:alpha(opacity=0); transition:all 1000ms ease 300ms; } .main_con .right_img{ width:522px; height:400px; top:-50px; } .main_con .left_info{ width:350px; height:300px; bottom:-50px; } .main_con .left_img,.main_con .left_info{ left:-50px; } .main_con .right_img,.main_con .right_info{ right:-50px; } .main_con .center_img{ opacity: 0; filter:alpha(opacity = 0); text-align: center; transition: all 1s ease 300ms; } .moving .main_con .left_img,.moving .main_con .left_info,.moving .main_con .center_img{ left:0; opacity: 1; filter:alpha(opacity = 100); } .moving .main_con .center_img{ transform: scale(0.8); } .moving .main_con .right_info,.moving .main_con .right_img{ margin-top:50px; right:0; opacity: 1; filter:alpha(opacity = 100); } .moving .main_con .right_img{ /*top:25px;*/ } .page1{ background:orange; } .page2{ background:lightgreen; } .page3{ background:cyan; } .page4{ background:pink; } .page5{ background:lightblue; } .points{ width:16px; height:176px; position:fixed; top:50%; right:20px; margin-top:-88px; } .points li{ width:16px; height:16px; line-height:16px; margin-top:15px; border:1px solid #666; border-radius:50%; } .points li:hover,.points li.active{ width:6px; height:6px; cursor: pointer; border:6px solid #fff70c; } </style> <script src="https://www.jb51.net/js/jquery-1.12.4.min.js"></script> <script src="https://www.jb51.net/js/jquery.mousewheel.min.js"></script> <script> $(function(){ $(".page1").addClass("moving"); var page = $(".page"); var len = page.length; var currentPage = 0; var timer = null; //获取显示区域的高度 var $h = $(window).height(); page.css({height:$h}); $(window).mousewheel(function(event,dat){ //向下滑dat为-1,向上滑dat为1 //清除前面开的定时器，实现函数节流 clearTimeout(timer); timer = setTimeout(function(){ if(dat == -1){ currentPage++; if(currentPage>len-1){ //如果大于4的话，就不往下滑 currentPage=len-1; } }else{ currentPage--; //判断当前所在页是否小于0，如果小于就不往上滑。 if(currentPage<0){ currentPage=0; } } $(".page").eq(currentPage).addClass("moving").siblings().removeClass("moving"); $("ul li").eq(currentPage).addClass("active").siblings().removeClass("active"); $(".page_con").animate({top:-$h*currentPage},300); },200); }); $(".points").delegate("li","click",function (){ $(".page").eq($(this).index()).addClass("moving").siblings().removeClass("moving"); $(this).addClass("active").siblings().removeClass("active"); currentPage = $(this).index()+1; //首先判断下点击的元素在当前选中的元素的上面还是下面，如果是在上面的话，top值为正值，否则为负值。 if($(this).index()<$(".active").index()){ $(".page_con").animate({top:$h*$(this).index()}); }else{ $(".page_con").animate({top:-$h*$(this).index()}); } }) }) </script> </head> <body> <div> <div> <div> <div> <img src="https://www.jb51.net/images/001.png" alt=""> </div> <div> Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那是网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。 </div> </div> </div> <div> <div> <div> 2005年以后，互联网进入web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端有此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上的软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 </div> <div> <img src="https://www.jb51.net/images/002.png" alt=""> </div> </div> </div> <div> <div> <div> <img src="https://www.jb51.net/images/004.png" alt=""> </div> <div> Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那是网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。 </div> </div> </div> <div> <div> <div> 2005年以后，互联网进入web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端有此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上的软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 </div> <div> <img src="https://www.jb51.net/images/003.png" alt=""> </div> </div> </div> <div> <div> <div> <img src="https://www.jb51.net/images/005.png" alt=""> </div> </div> </div> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
浅谈事件冒泡、事件委托、jQuery元素节点操作、(3)
内容版权声明：除非注明，否则皆为本站原创文章。