<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. ES6 let和const命令

    一.let定义变量 { let a = 1;} console.log(a);只在let所在的代码块有效,console的结果是a is not defined,报错. 不存在var的变量提升,即使用 ...

  2. codeforces432D Prefixes and Suffixes(kmp+dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud D. Prefixes and Suffixes You have a strin ...

  3. oracle 时间比较查询

    select * from table  where add_time>=to_date('2015/01/03','yyyy/mm/dd')

  4. Android网络连接的两种方法：apache client和httpurlconnection的比较

    另见http://blog.csdn.net/mingli198611/article/details/8766585 在官方blog中,android工程师谈到了如何去选择apache client ...

  5. node.js 环境搭建

    一 官网下载安装包 : 1.http://www.nodejs.org/download/ 选择相应的包进行安装 2.安装express : npm install -g express -gener ...

  6. 如何使用Assetic进行文件管理

    安装和配置Assetic 从symfony2.8开始,Assetic就不再被包括在symfony标准版.使用任何Assetic的特性之前需要安装AsseticBundel,在命令行执行下面命令: $ ...

  7. HQL和Criteria(转)

    HQL(Hibernate Query Language)        面向对象的查询语言,与SQL不同,HQL中的对象名是区分大小写的(除了JAVA类和属性其他部分不区分大小写):HQL中查的是对 ...

  8. 串口WIF简单调试

    /*********************************************************************** Title:Wifi串口调试 Hardware: Wi ...

  9. 美国政府关于Google公司2013年度的财务报表红头文件

    请管理员移至新闻版块,谢谢! 来源:http://www.sec.gov/ 财务报表下载↓ 此文仅作参考分析. 10-K 1 goog2013123110-k.htm FORM 10-K   UNIT ...

  10. sh里没有多行注释，只能每一行加一个#号

    sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是一个自动打ipa的脚本,基于webfrogs ...