<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>

section 模块页面切换代码的更多相关文章

  1. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  2. AngularJs应用页面切换优化方案（转）

    目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...

  3. iOS开发之——从零开始完成页面切换形变动画

    前言 某天我接到了UI发给我的两张图: 需求图.png 看到图的时候我一脸懵逼,显然我需要做一个页面切换的指示动画.老实说,从大三暑假开始做iOS开发也一年有余了,但是遇到复杂动画总是唯恐避之不及,只 ...

  4. Swift - 使用导航条和导航条控制器来进行页面切换

    通过使用导航条(UINavigationBar)与导航条控制器(UINavigationController)可以方便的在主页面和多层子页面之间切换.下面通过一个简单“组件效果演示”的小例子来说明如何 ...

  5. iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换

    iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换 不多说直接上效果图和代码 1.设置RootViewController为一个导航试图控制器 //  Copyright © 2016年 ...

  6. jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...

  7. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  8. C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西，也许你那块就用的到

    C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...

  9. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. javaScript表单焦点自动切换

    ---恢复内容开始--- <html> <head> <script> window.onload=function(){ var form=document.ge ...

  2. windows 下查看端口占用命令

    cmd netstat -ano

  3. css 背景图片拉伸[转]

    http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...

  4. 移动web前端的一些硬技能（二）动手前必须掌握的基本常识

    记得刚开始接触移动端web的时候,书和网上的资料都不多,查起来很费劲,现在比以前要好很多了,可是还是会有一些刚接触移动端的朋友会问我一些我最初会遇到的问题,或许是书本写的并不那么重,也或许是这些知识写 ...

  5. yii2中的url美化

    在yii2中,如果想实现类似于post/1,post/update/1之类的效果,官方文档已经有明确的说明 但是如果想把所有的controller都实现,这里采用yii1的方法 'rules' =&g ...

  6. nginx中配置跨域支持功能

    vi /etc/nginx/nginx.conf 加入如下代码 http {  ###start####  add_header Access-Control-Allow-Origin *;  add ...

  7. DropBox与Box的区别，包括直接的投资人的评价（本地Sync可能还是挺重要的）

    作者:曲凯链接:http://www.zhihu.com/question/22207220/answer/20642357来源:知乎著作权归作者所有,转载请联系作者获得授权. Box和Dropbox ...

  8. C# sql Helper

    using System; using System.Collections; using System.Collections.Generic; using System.Configuration ...

  9. Linux下，连接器ld链接顺序的总结

    原来ld对于链接一系列的库的顺序是很敏感的,不然会报undefined referenced 的函数符号错误,意思就是未找到函数定义.实际上库是能正确打开的.如果库libA.a依赖于库libB.a,那 ...

  10. logstash grok 解析Nginx

    log_format main '$remote_addr [$time_local] "$request" ' '$request_body $status $body_byte ...