特效描述:html5 鼠标滚动控制 页面滑动展示。页面滚动
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
2. 引入JS
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/sectionscroll.js" type="text/javascript"></script> <script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
3. HTML代码
<!-- container --> <section id="section1" class="section section1"> <article class="sectionWrapper section1Wrapper fadeInDown"> <div class="sectionTitle"> <h1 class="txthide">域名3.0</h1> <div class="txthide"> <span></span> <span>易名中国手机客户端</span> </div> <div id="gem-back"><a class="gem-back" href="http://www.17sucai.com/"></a></div> <h2><img src="images/text_01.png" width="260" alt="易名3.0" ></h2> <div class="iph_dload"><a href="http://www.17sucai.com/"><img src="images/iphone_dload.png" width="260px" height="85px" alt="ipone下载"></a></div> <div class="andr_dload"><a href="http://www.17sucai.com/"><img src="images/android_dload.png" width="260px" height="85px" alt="安卓下载"></a></div> </div> <div class="secitonbottombg"><img src="images/fir_bg.jpg" width="1622px" class="imgpng"/></div> <div class="arrow_down"><a href="#section2"><img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"></a> </div> </article> </section> <section id="section2" class="section section2"> <article class="sectionWrapper section2Wrapper"> <div class="secitonbottombg"><img src="images/sec_bg.jpg" width="1000" akt="购买域名"/></div> <div class="arrow_down"><a href="#section3"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"></a></div> </article> </section> <section id="section3" class="section section3"> <article class="sectionWrapper section3Wrapper"> <div class="secitonbottombg"><img src="images/thi_bg.jpg" width="1128" alt="域名交流"/></div> <div class="arrow_down"><a href="#section4"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"></a></div> </article> </section> <section id="section4" class="section section4"> <article class="sectionWrapper section4Wrapper"> <div class="secitonbottombg"><img src="images/fou_bg.jpg" width="1128" alt="域名查询注册"/></div> <div class="arrow_down"><a href="#section5"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"></a></div> </article> </section> <section id="section5" class="section section5"> <article class="sectionWrapper section5Wrapper"> <div class="secitonbottombg"><img src="images/fif_bg.jpg" width="668" alt="域名管理"/></div> <div class="arrow_down"><a href="#section6"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"></a></div> </article> </section> <section id="section6" class="section section6"> <article class="sectionWrapper section6Wrapper"> <div class="secitonbottombg"> <img src="images/six_bg.jpg" width="668" alt="新闻资讯"/> <a href="#" > <img src="images/download.jpg" width="300px" height="105px" alt="立即下载"></a> </div> </article> </section> <!--回到顶部--> <div id="arrow_up"><a href="#" ><img src="images/slide_up.png" width="90px" height="90px" alt="回到顶部" ></a></div> <script type="text/javascript"> var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; $(window).scroll(function(){ var Yoffset=window.pageYOffset || document.documentElement.scrollTop; if (Yoffset> 2* h) { $("#arrow_up").fadeIn(100); }else{ $("#arrow_up").fadeOut(100); }; }); $("#arrow_up").bind("click",function(e){ e.preventDefault(); $("body").animate({"scrollTop":"0"},1000); }); </script> <script src="js/sectionscroll.js" type="text/javascript"></script>