实现效果为页面平滑过渡全屏切换，点击导航和鼠标滚动都可以切换。

效果图：

html代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome=1"><!--告诉ie使用新的渲染方式，防止低版本的ie不能使用css3-->

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css"/>

    <link href="css/css.css" rel="stylesheet"/>

</head>

<body>

<div class="container">

    <div class="nav">

        <input type="radio" name="radio-set" checked id="nav1">

        <a href="#panel1">导航1</a>

        <input type="radio" name="radio-set" id="nav2">

        <a href="#panel2">导航2</a>

        <input type="radio" name="radio-set" id="nav3">

        <a href="#panel3">导航3</a>

        <input type="radio" name="radio-set" id="nav4">

        <a href="#panel4">导航4</a>

        <input type="radio" name="radio-set" id="nav5">

        <a href="#panel5">导航5</a>

    <div class="scroll">

        <section class="panel" id="panel1">

            <div class="icon" data-icon="a"></div>

            <h1>Serendipity1</h1>

            <p>you are my sunshine</p>

        </section>

        <section class="panel panelColor" id="panel2">

            <div class="icon" data-icon="b"></div>

            <h1>Serendipity2</h1>

            <p>you are my sunshine</p>

        </section>

        <section class="panel" id="panel3">

            <div class="icon" data-icon="c"></div>

            <h1>Serendipity3</h1>

            <p>you are my sunshine</p>

        </section>

        <section class="panel panelColor" id="panel4">

            <div class="icon" data-icon="d"></div>

            <h1>Serendipity4</h1>

            <p>you are my sunshine</p>

        </section>

        <section class="panel" id="panel5">

            <div class="icon" data-icon="e"></div>

            <h1>Serendipity5</h1>

            <p>you are my sunshine</p>

        </section>

    </div>

    </div>

</div>

<script>

    window.onload= function () {

        var scroll=document.getElementsByClassName("scroll")[0];//ie不兼容，换成id会成功

        var panel=document.getElementsByClassName("panel");//ie不兼容，换成id会成功

        var clientH=window.innerHeight;

        scroll.style.height=clientH+"px";

        for(var i=0;i<panel.length;i++){

            panel[i].style.height=clientH+"px";

        }

        /*下面是关于鼠标滚动*/

        var inputC=document.getElementsByTagName("input");

        var wheel= function (event) {

            var delta=0;

            if(!event)//for ie

                event=window.event;

            if(event.wheelDelta){//ie,opera

                delta=event.wheelDelta/120;

            }else if(event.detail){

                delta=-event.detail/3;

            }

            if(delta){

                handle(delta,inputC);

            }

            if(event.preventDefault)

event.preventDefault();

            event.returnValue=false;

        };

        if(window.addEventListener){

            window.addEventListener('DOMMouseScroll',wheel,false);

        }

        window.onmousewheel=wheel;

    };

    function handle(delta,arr) {

        var num;

        for(var i=0;i<arr.length;i++){//得到当前checked元素的下标

            if(arr[i].checked){

                num=i;

            }

        }

        if(delta>0 && num>0){//向上滚动

            num--;

            arr[num].checked=true;

        }else if(delta<0 && num<4){//向下滚动

            num++;

            arr[num].checked=true;

        }

    }

</script>

</body>

</html>

CSS代码：

*{

    margin:0;

    padding:0;

}

body{

    font-family:Georia,serif;

    background:#ddd;

    font-weight:bold;

    font-size:15px;

    color:#333;

    overflow: hidden;

    -webkit-font-smoothing:antialiased;

}

a{

    text-decoration:none;

    color:#555;

}

.clr{

    width:0;

    height:0;

    overflow: hidden;

    clear:both;

    padding:0;

    margin:0;

}

.nav{

    width:100%;

    position:absolute;

    left:0;

    bottom:0;

    font-family:"Josefin Slab","Myriad pro" ,serif;

}

.nav input,.nav a{

    width:20%;

    height:34px;

    line-height:34px;

    position:fixed;

    bottom:0;

    cursor:pointer;

}

.nav input{

    opacity:0;

    z-index:1000;

}

.nav a{

    z-index:10;

    font-weight:700;

    font-size:16px;

    background:#e23a6e;

    color:#fff;

    text-align:center;

    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);

}

#nav1,#nav1 + a{

    left:0%;

}

#nav2,#nav2 + a{

    left:20%;

}

#nav3,#nav3 + a{

    left:40%;

}

#nav4,#nav4 + a{

    left:60%;

}

#nav5,#nav5 + a{

    left:80%;

}

.nav input:checked + a,

.nav input:checked:hover +a{

    background:#821134;

}

.nav input:checked + a:after{

    content:"";

    width:0;

    height:0;

    overflow:hidden;

    border:20px solid transparent;

    border-bottom-color:#821134;

    position:absolute;

    bottom:100%;

    left:50%;

    margin-left:-20px;

}

.nav input:hover + a{

    background:#AD244f;

}

.scroll,.panel{

    width:100%;

    height:100%;

    position:relative;

    text-align:center;

    padding-top:250px;

}

.scroll{

    left:0;

    top:0;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transition: all 0.6s ease-in-out;

    -moz-transition: all 0.6s ease-in-out;

    -o-transition: all 0.6s ease-in-out;

    transition: all 0.6s ease-in-out;

    color:#e23a6e;

    font-weight:bold;

}

.panel{

    background:#fff;

    overflow: hidden;

}

/*动画*/

#nav1:checked ~ .scroll #panel1 h1{

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    animation: moveDown 0.6s ease-in-out 0.2s backwards;

}

#nav2:checked ~ .scroll #panel2 h1{

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    animation: moveDown 0.6s ease-in-out 0.2s backwards;

}

#nav3:checked ~ .scroll #panel3 h1{

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    animation: moveDown 0.6s ease-in-out 0.2s backwards;

}

#nav4:checked ~ .scroll #panel4 h1{

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    animation: moveDown 0.6s ease-in-out 0.2s backwards;

}

#nav5:checked ~ .scroll #panel5 h1{

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;

    animation: moveDown 0.6s ease-in-out 0.2s backwards;

}

@keyframes moveDown {

    0%{

        -webkit-transform: translateY(-40px);

        -moz-transform: translateY(-40px);

        -ms-transform: translateY(-40px);

        -o-transform: translateY(-40px);

        transform: translateY(-40px);

        opacity:0;

    }

    100%{

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -ms-transform: translateY(0);

        -o-transform: translateY(0);

        transform: translateY(0);

        opacity:1;

    }

}

.panel p{

    color:#000;

    margin-top:20px;

}

#nav1:checked ~ .scroll{

     -webkit-transform: translateY(0%);

     -moz-transform: translateY(0%);

     -ms-transform: translateY(0%);

     -o-transform: translateY(0%);

     transform: translateY(0%);

 }

#nav2:checked ~ .scroll{

    -webkit-transform: translateY(-100%);

    -moz-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    -o-transform: translateY(-100%);

    transform: translateY(-100%);

}

#nav3:checked ~ .scroll{

    -webkit-transform: translateY(-200%);

    -moz-transform: translateY(-200%);

    -ms-transform: translateY(-200%);

    -o-transform: translateY(-200%);

    transform: translateY(-200%);

}

#nav4:checked ~ .scroll{

    -webkit-transform: translateY(-300%);

    -moz-transform: translateY(-300%);

    -ms-transform: translateY(-300%);

    -o-transform: translateY(-300%);

    transform: translateY(-300%);

}

#nav5:checked ~ .scroll{

    -webkit-transform: translateY(-400%);

    -moz-transform: translateY(-400%);

    -ms-transform: translateY(-400%);

    -o-transform: translateY(-400%);

    transform: translateY(-400%);

}

.icon{

    width:200px;

    height:200px;

    background:#fa96b5;

    -webkit-transform:translateY(-50%) rotate(45deg);

    -moz-transform:translateY(-50%) rotate(45deg);

    -ms-transform:translateY(-50%) rotate(45deg);

    -o-transform:translateY(-50%) rotate(45deg);

    transform:translateY(-50%) rotate(45deg);

    position:absolute;

    left:50%;

    top:0;

    margin-left:-100px;

}

[data-icon]:after{

    content:attr(data-icon);

    width:200px;

    height:200px;

    color:#fff;

    font-size:90px;

    text-align:center;

    line-height:200px;

    position:absolute;

    left:18%;

    top:18%;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

.panelColor{

    background:#fa96b5;

    color:#fff;

}

.panelColor .icon{

    background:#fff;

    color:#fa96b5;

}

.panelColor .icon:after{

    color:#fa96b5;

}

.scroll .panel h1{

    font-size:60px;

}

@media screen and (max-device-width: 520px){

}

Firefox和chrome测试没问题，IE就算了吧_(:зゝ∠)_，我恨IE

原文地址  http://blog.csdn.net/liona_koukou/article/details/52680409

js实现网页全屏切换（平滑过渡），鼠标滚动切换的更多相关文章

  1. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  2. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  3. js设置页面全屏

    html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...

  4. JavaScript网页全屏API

    在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...

  5. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  6. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

  7. js控制浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...

  8. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  9. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

随机推荐

  1. Educational Codeforces Round 48 (Rated for Div. 2)G. Appropriate Team

    题意:求满足条件的(i,j)对数:\(gcd(v,a_i)=x,lcm(v,a_j)=y\) 题解:\(x|a_i,a_j|y\),\(x|y\),考虑质因子p,假设a_i中p次数为a,x中次数为b, ...

  2. getopt实现传参自动识别

    test.py #!/usr/bin/env python # -*- coding: utf-8 -*- import getopt import sys #-h-f-v为了下面的识别 opts,a ...

  3. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  4. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  5. ORACLE-016：ora-01720 授权选项对于'xxxx'不存在

    报错的情形如下, A用户:视图V_A B用户:视图V_B,并且用到了V_A C用户:需要用V_B, 授权过程, A用户下: grant select on V_A to B B用户下: grant s ...

  6. centos命令行系列之centos6防火墙的关闭以及开启

    输入:cat /etc/issue   查看版本 (一)通过service命令 注:service命令开启以及关闭防火墙为即时生效,下次重启机器的时候会自动复原 查看防火墙状态:service ipt ...

  7. MySQL_插入更新 ON DUPLICATE KEY UPDATE

    平时我们在设计数据库表的时候总会设计 unique  或者 给表加上 primary key 的限制条件. 此时 插入数据的时候 ,经常会有这样的情况: 我们想向数据库插入一条记录: 若数据表中存在以 ...

  8. python中的IO模块

    1.简介 读写文件是常见的IO操作,python内置了读写文本的函数. 读写文件的模式描述如下: 模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打 ...

  9. 【Python】Anaconda配置

    Anaconda 是一个用于科学计算的Python发行版,支持 Linux.Mac.Windows 系统,提供了包管理与环境管理的功能,可以很方便地解决多版本 Python 并存.切换以及各种第三方包 ...

  10. 利用ML&AI判定未知恶意程序——里面提到ssl恶意加密流检测使用N个payload CNN + 字节分布包长等特征综合判定

    利用ML&AI判定未知恶意程序 导语:0x01.前言 在上一篇ML&AI如何在云态势感知产品中落地中介绍了,为什么我们要预测未知恶意程序,传统的安全产品已经无法满足现有的安全态势.那么 ...