<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360安全导航</title> <link rel="stylesheet" href="./css/main.css"> <style> ul,p{margin: 0;padding:0;} .nav{position: fixed;right: 2%;top: 37%;z-index: 1;} .nav li{list-style: none;width: 100px;overflow: hidden;height: 50px;} .nav li p{float: left;} .nav li a{float: right;width: 15px;height: 15px;border: 2px solid black;background: white;border-radius: 50%;} .nav li.currentPoint a{background: orange;} </style> </head> <body style="overflow-y:hidden"> <div class="nav"> <ul> <li class="currentPoint"> <p>page1</p> <a href="#page1"></a> </li> <li> <p>page2</p> <a href="#page2"></a> </li> <li> <p>page3</p> <a href="#page3"></a> </li> <li> <p>page4</p> <a href="#page4"></a> </li> <li> <p>page5</p> <a href="#page5"></a> </li> </ul> </div> <div class="fullpage" id="fullpage"> <!-- 第一屏 --> <section class="section" id="page1"> <!-- LOGO --> <div class="logo"></div> <!-- 文字 --> <div class="text"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> <!-- 特征 --> <div class="feature"></div> </section> <!-- 第二屏 --> <section class="section" id="page2"> <!-- 盾牌 --> <div class="shield"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <!-- 介绍 --> <div class="intro"></div> </section> <!-- 第三屏 --> <section class="section" id="page3"> <!-- 介绍 --> <div class="intro"></div> <!-- 圆环 --> <div class="circle"> <span></span> <span></span> <span></span> </div> <!-- 火箭 --> <div class="rocket"></div> </section> <!-- 第四屏 --> <section class="section" id="page4"> <!-- 搜索框 --> <div class="search"> <!-- 关键字 --> <span class="key"></span> <!-- 查询结果 --> <div class="wrap"> <div class="tips"></div> </div> </div> <!-- 介绍 --> <div class="intro"></div> </section> <!-- 第五屏 --> <section class="section" id="page5"> <!-- 介绍 --> <div class="intro"></div> <div class="browser"> <!-- 背影 --> <div class="bg"></div> <!-- 工具栏 --> <div class="swrap"> <span></span> </div> <!-- 边框线 --> <div class="line"></div> <div class="leftside border"></div> <div class="topside border"></div> <div class="rightside border"></div> <div class="bottomside border"></div> </div> </section> </div> <script src="./js/jquery.min.js"></script> <script> $(function(){ /*$('.nav li a').on('click',function(){ $(this).parent().addClass('currentPoint').siblings().removeClass('currentPoint'); var index =$(this).parent().index(); $('.section').eq(index).addClass('current').siblings().removeClass('current'); });*/ var windowH = $(window).height(); var index=1; var flag = true; var timer; //console.log(typeof windowH); $('.section').height(windowH); $('.section').eq(0).addClass('current');//初始化 $(document).on('mousewheel', function(ev) { //除了FF以外的浏览器都运行这个 //console.log(ev); //console.log(ev.originalEvent.wheelDelta); clearTimeout(timer); timer=setTimeout(function(){ if(ev.originalEvent.wheelDelta<0){ //向下滚 //$('html,body').scrollTop(windowH*index); $('html,body').animate({ //1 scrollTop:windowH*index, },1000,function(){ //alert(index); $('.section').eq(index-1).addClass('current').siblings().removeClass('current'); //index-1主要因为定时器问题，导致后面的index++比当前这行快执行 $('.nav li').eq(index-1).addClass('currentPoint').siblings().removeClass('currentPoint'); }); index++; //2 }else{ //向上滚 index--; $('html,body').animate({ //1 scrollTop:windowH*(index-1), },1000,function(){ //alert(index); $('.section').eq(index-1).addClass('current').siblings().removeClass('current'); //index-1主要因为定时器问题，导致后面的index++比当前这行快执行 $('.nav li').eq(index-1).addClass('currentPoint').siblings().removeClass('currentPoint'); }); } },300) //3 ev.preventDefault(); return false; }); $(window).resize(function(){ $('.section').height(windowH); }); }); </script> </body> </html>
2656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
