你的位置:首页 > Java教程

[Java教程]jquery实现视觉滚动


用fullpage.js实现视觉滚动效果

1.Html页面

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">  <title>使用fullpage实现视觉滚动效果</title>  <script type="text/javascript" src="js/fullPage.min.js"></script>  <link href="css/index.css" rel="stylesheet" type="text/css" />  <script src="js/jquery.1.8.1.js"></script></head><body>  <div id="pageContain">    <div class="page page1 current" id="page1">      <img class="imgStyle" src="img/p16.jpg">      <div class="contain pa section">        <div class="title1">第一屏</div>        <a id="transparent_div1" style="position:absolute;text-align:center;bottom:0px;width: 500px;left:50%;margin-left: -250px;"><img style="width:28px;height:36px;z-index:5;" src="img/arrow_down.png"></a>            </div>    </div>    <div class="page page2" id="page2">      <img class="imgStyle" src="img/p2.jpg">      <div class="contain pa section">        <div class="section_title">第二屏</div>      </div>    </div>    <div class="page page3" id="page3">      <img class="imgStyle" src="img/p4.jpg">      <div class="contain pa section">        <div class="section_title">第三屏</div>        <!-- <div >第三屏的第一屏</div>        <div >第三屏的第二屏</div>        <div >第三屏的第三屏</div>        <div >第三屏的第四屏</div>        <ul id="navBar1">          <li></li>          <li></li>          <li></li>          <li></li>        </ul> -->      </div>    </div>    <div class="page page4" id="page4">      <img class="imgStyle" src="img/p5.jpg">      <div class="contain pa section">        <div class="section_title">第四屏</div>      </div>    </div>    <div class="page page5" id="page5">      <img class="imgStyle" src="img/p8.jpg">      <div class="contain pa section">        <div class="section_title">第五屏</div>      </div>    </div>    <div class="page page6" id="page6">      <div class="contain pa section">        <div class="section_title">第六屏</div>      </div>    </div>  </div>  <ul id="navBar">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul>  <script type="text/javascript">    var runPage;    runPage = new FullPage({      id: 'pageContain',      slideTime: 800,      effect: {        transform: {          translate: 'Y'        },        opacity: [0, 1]      },      mode: 'wheel, touch, nav:navBar',      easing: 'ease',      scrollDelay:400    });    $('#transparent_div1').on('click', function(){      runPage.next();    });    window.onload=function(){      $('#transparent_div1').css({        'opacity': 0.5,        'display': 'block'      }).animate({        "opacity": 1      }, 2000);    }    setInterval(function(){      $('#transparent_div1').animate({'bottom':'25px'},200).animate({'bottom':'5px'},200).animate({'bottom':'15px'},200);      },600);    //pageup pagedown控制滚动    document.onkeydown=function(event){      var e = event || window.event || arguments.callee.caller.arguments[0];      if(e && e.keyCode==38){        runPage.prev();      }      if(e && e.keyCode==40 ){        runPage.next();      }    };   </script></body></html>

 

效果图

 

源代码地址:http://files.cnblogs.com/files/gzx618/fullPage.zip