<div class= "Blockcode" ><blockquote><! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> single page switch experiment </title>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.9.1.js" ></script>
<style type= "Text/css" >
Abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu, Meter,nav,output,progress,section,time,video
{
Display:block;
}
*
{
margin:0px;
padding:0px;
}
Html
{
Overflow-y:hidden;
}
Section
{
width:100%;
}
. page1,.page3
{
Background:yellow;
}
. page2,.page4
{
Background:orange;
Color:white;
}
. Active
{
color:red;
}
</style>
<!--[if it IE 9]>
<script>
(function () {
if (!
/*@[email protected]*/
0) return;
var e = "abbr, article, aside, audio, canvas, DataList, Details, dialog, EventSource, figure, Footer, header, Hgroup, Mark, menu, meter, nav, output, progress, section, time, video. Split (', ');
for (Var i=0;i<e.length;i++)
{
document.createelement (e[i]);
}
})
</script>
<![ Endif]-->
<script src= "./jquery.js" ></SCRIPT>>
<script type= "Text/javascript";
function Onepagescroll (obj) {
var num;
var detail;
var scrolltop = $ (' html,body '). scrolltop ();
var activecss = "." +obj.activecss;
Var Li;
//Add OPTION Element
$ (obj.sectioncontain). Wrapall ("<div class= ' wrap ' ></div>");
$ (". Wrap"). CSS ("position", "relative");
$ (". Wrap"). Append ("<ul class= ' item ' ></ul>");
$ (". Item"). CSS ("position", "fixed"). CSS ("Right", "30px"). CSS ("Top", "40%"). CSS ("Background", "white");
for (var i = 0; i<$ (obj.sectioncontain). length; i++) {
$ (". Item"). Append ("<li>" + (i+1) + "</li>");
}
Initialization options
$ (". Item Li:first"). addclass (OBJ.ACTIVECSS);
Gets the index of the current Period option
Li = $ (". Item Li");
Adjust window trigger Events
$ (window). Resize (function () {
$ (obj.sectioncontain). CSS ("height", document.documentelement.clientheight+ ' px ');//Regain Visual altitude sickness reset section height
$ (' html,body '). Animate ({scrolltop:document.documentelement.clientheight*$ (ACTIVECSS). Index ()},0);// Aligns the upper-left corner of the current section with the upper-left corner of the browser's visible height
});
$ (obj.sectioncontain). CSS ("height", document.documentelement.clientheight+ ' px ');//Get browser viewable area height and set section height
Li.each (function (index) {
$ (this). Click (function () {
if ($ (activecss). Index () ==index) {
If you click on the current element of the section of the index of Li, then return directly
Return
}
$ (this). Siblings (). Removeclass (OBJ.ACTIVECSS);//Remove CSS from all
$ (this). addclass (OBJ.ACTIVECSS);//Current Li Add active
$ (' html,body '). Stop (). Animate ({scrolltop:$ (obj.sectioncontain). EQ (index). Offset (). top},1000);// The overall page scrolls to the target section location
var scrollfunc = function (e) {
e=e | | window.event;
num = $ (activecss). index ();
Detail = E.wheeldelta? E.wheeldelta: (-e.detail);
if (detail>0) {
if ($ ('. Active '). Index () ==0) {
return;
}else{
Li.removeclass (OBJ.ACTIVECSS);
Li.eq (num-1). addclass (OBJ.ACTIVECSS);
$ (' html,body '). Stop (). Animate ({scrolltop:$ (obj.sectioncontain). EQ (num-1). Offset (). top},1000);
}
}else if (detail<0) {
if ($ ('. Active '). Index () ==3) {
Return
}else{
Li.removeclass (OBJ.ACTIVECSS);
Li.eq (num+1). addclass (OBJ.ACTIVECSS);
$ (' html,body '). Stop (). Animate ({scrolltop:$ (obj.sectioncontain). EQ (num+1). Offset (). top},1000);
}
}
}
if (Document.addeventlistener) {
Document.addeventlistener (' Dommousescroll ', scrollfunc,false);
}
Document.onmousewheel = Scrollfunc;
});
});
}
$ (function () {
Onepagescroll ({
Sectioncontain: ' section ',
ACTIVECSS: ' Active '
});
})
</script>
<body>
<section class= "Page1" >page1</section>
<section class= "Page2" >page2</section>
<section class= "Page3" >page3</section>
<section class= "Page4" >page4</section>
</body>
Section Module page switch code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
