Home>

Instructions:

First introduce jquery.js, jquery-ui.js, fullpage.js and style file jquery.fullpage.css in the head area.

<link rel="stylesheet" href="css/jquery.fullpage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>

Then build the html code, the code here is longer,So in the middle ...

<div>
<div><img src="images/section1.jpg"></div>
<div></div>
<div></div>
<div></div>
<div>
<a href="http://www.jqcool.net/">163 mailbox</a>
<a href="http://www.jqcool.net/">126 mailbox</a>
<a href="http://www.jqcool.net/">yeah mailbox</a>
</div>
<div>
<h1><a href="http://www.jq22.com/">NetEase mailbox 6.0</a>
<h2>changes, more than just seeing.
</h2>
</div>
<p>NetEase Mailbox Version 6.0——the most creative heavyweight new mailbox of 2014,Rebirth Guanghua,Take notice.
Beautiful<br>visual design and visual interaction,Irreplaceable original dynamic scene skin,A number of domestic creative product patented technologies,<br>Outstanding unparalleled taste,Unparalleled wonderful experience.
</p>
</div>
<div>content</div>
<div>content</div>
...
<div>content</div>
<div>
 <div><img src="images/section10.jpg"></div>
 <div></div>
 <div></div>
 <div></div>
 <a href="http://www.jqcool.net/">Experience now</a>
 <p>
 <a href="javascript:"&About NetEase</a>
 <a href="javascript:">About NetEase Free Mail</a>
 <a href="javascript:">Email Official Blog</a>
 <a href="javascript:">Customer Service</a>
 <a href="javascript:">Privacy Policy</a>
 <span>|</span>
 <span>Netease Corporation Copyright&Copy;1997-2014</span>
 </p>
</div>

In order to be compatible with the lower versions of ie, the "big background" uses the img method (section1.jpg), and sets the img width and height 100%in the css to fill the entire screen.

javascript

$(function () {
 if ($. browser.msie&&$.browser.version<10) {
 $("body"). addclass ("ltie10");
 }
 $.fn.fullpage ({
 verticalcentered:false, anchors:["page1", "page2", "page3", "page4", "page5", "page6", "page7", "page8", "page9", "page10"], navigation:true, navigationtooltips:["Home", "Visual", "Interactive", "Skin", "Features", "To-do email", "Contact email", "Technology", "Connect to Easy Credit", "Experience now"]
 });
});

In order to have a better experience in lower versions of ie that do not support css3 animation,We judge the browser,If the IE version is lower than 10, add a ltie10 class to the body. The main role of this class is to solve the low-level ie when scrolling,The background picture is immediately hidden.

  • Previous Quickly add multi-user and database skills to mysql by reading and executing commands from documents
  • Next Detailed Centos installation MariaDB using YUM