<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. latex 模版

    texlive2012 通过 \documentclass[a4paper]{article} %\documentclass[twocolumn]{article}   %\usepackage{g ...

  2. 亲试，Windows平台上使用Qt5.2.1编写Android

    首先把工具都下载好: 1. Qt for Android: http://qt-project.org/downloads 2. Android NDK http://developer.androi ...

  3. mac下 WebStorm下主题包安装

    mac下: 主题包 1.mac下,点击桌面,使用shift+command+G 输入:~/Library/Preferences 前往(mac查找安装目录的方法,因为默认这些文件夹是隐藏的),进入We ...

  4. Array类型（二）

    1.concat()方法可以基于当前数组中的所有项创建一个新数组. 先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组. var colors = ["r ...

  5. collections——高性能容器数据类型

    由于最近对机器学习算法感兴趣,一直知道python有一个包collections封装了一些比dict,list之类高级点的类,所以抽空研究下,为接下来的工作准备. 主要参考是https://docs. ...

  6. 基于C#—WPF的扫雷游戏

    自学教材:<C#入门经典(第六版)>,1月28日购入,1月29日到2月9日学习了前十六章,由于有C语言基础,在语法阶段学习起来比较轻松,不过在接触到面向对象的时候遇到了一些困难,对于一些概 ...

  7. JS编码解码详解

    今天在整理 js编码解码方法时,在网上搜资料,发现一篇文章讲的不错,讲解的非常简单明了,于是乎就想转载过来,却发现无法转载到博客园,最后只能卑鄙的摘抄过来.js编码解码就是将一些对URL和数据库敏感的 ...

  8. LeetCode_Roman to Integer

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  9. Linux实现SSH无密码登录（对目录权限的设置非常详细，可以参考一下）

    假设服务器IP地址为192.168.1.1,机器名:cluster.hpc.org 客户端IP地址为172.16.16.1,机器名:p470-2.wangrx.sioc.ac.cn 客户端用户yzha ...

  10. LeeCode-Delete Node in a Linked List

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...