<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. WCF入门教程系列一

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  2. Spring mvc中@RequestMapping 6个基本用法整理

    继续整理,这个是前段时间用jsp开发的一个站点,说起来php程序员去做jsp程序确实有些小不适应,但是弄完后绝对对于这种强类型语言而比收获还是颇多的. 1,最基本的,方法级别上应用 @RequestM ...

  3. perl6之'Hello World'

    安装完perl6之后,当然是要写一下Hello World了. 因为perl6的脚本一般都很短小,所以用不着很笨重的IDE之类的东西,我们用VIM,sublime text这种小型的编辑器 来开始pe ...

  4. python-整理--连接MSSQL

    环境 : python3.4 / win10 / vs2013 / sqlexpress2014 需要的工具和包 1.freetds包 下载地址 https://github.com/ramiro/f ...

  5. winform 读取保存配置文件

    原文连接: public static string fileName = System.IO.Path.GetFileName(Application.ExecutablePath);        ...

  6. performance_schema 变量

    performance_schema 这个变量来控制performance_schema库的禁用和启用 1.performance_schema的值说明 performance_schema=1 表示 ...

  7. elasticsearch 搜索不支持单词的部分进行匹配

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# curl -XGET http://192.168.32.80:9200/logstash-201 ...

  8. Eclipse中设置注释、日期等信息

    在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的,例如其中author,datetime等属性值. 我们可以在Eclipse 中进行设置自己希望显示的注释信息 ...

  9. 关于memcpy和memmove的一点说明

    今天看到书上降到memcpy和memmove的区别才突然发现原来两者之间有如此区别,以前只知道这两个函数是 实现同样的功能,没有接触到其不同. memcpy和memmove在MSDN的定义如下: 从两 ...

  10. Cocos2d-x 架构一个游戏的一般思路

    采用下面的步骤来实现游戏逻辑: 通过应用程序代理类来初始化第一个CCScene(即AppDelegate里面的第一个CCScene), CCScene里面实例化一个或者多个CCLayer,并把它们当作 ...