<div class="blockcode"><blockquote><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>单页面切换实验</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 (! /*@cc_on!@*/ 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; //添加选项元素 $(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>"); } //初始化选项 $(".item li:first").addClass(obj.activeCss); //获取当期选项的index li = $(".item li"); //调整窗口触发事件 $(window).resize(function(){ $(obj.sectionContain).css("height",document.documentElement.clientHeight+'px');//重新获取可视高度 病重新设置section高度 $('html,body').animate({scrollTop:document.documentElement.clientHeight*$(activeCss).index()},0);//保证当前section的左上角和浏览器可视高度的左上角对齐});
$(obj.sectionContain).css("height",document.documentElement.clientHeight+'px');//获取浏览器可视区域高度并设置section的高度 li.each(function(index){ $(this).click(function(){ if($(activeCss).index()==index){ //如果点击li的index的section的当前元素，那么直接返回 return; } $(this).siblings().removeClass(obj.activeCss);//全部移除css $(this).addClass(obj.activeCss);//当前li添加active $('html,body').stop().animate({scrollTop:$(obj.sectionContain).eq(index).offset().top},1000);//整体页面滚动到目标section位置 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></html>