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

效果图:

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. 解决无法安装Microsoft .Net Framework 3.5

    如果解决不了,试试我的方法吧,我也在网上找了好久,最终在本地解决了 所需工具:dism,和Net Framework 3.5,已经打包 链接:https://pan.baidu.com/s/1nKok ...

  2. 【JS】【2】ajax传的参数为数组时,后台接收为null的处理

    前言: 1,参考博客:解决JavaScript中使用$.ajax方式提交数组参数 - Just_Do - 博客园(http://www.cnblogs.com/caoyc/p/5710702.html ...

  3. MySQL 分支和循环结构

    1.if else分支 mysql:用elseif               Oracle:用elsif 可以用select直接查看获取的值或者一个变量. create procedure pd_t ...

  4. kohana导入和导出

    一.导入 ini_set('memory_limit', '512M'); require_once(Kohana::find_file('vendor', 'PHPExcel/PHPExcel/IO ...

  5. 使用ajax请求接口,跨域后cookie无法设置,全局配置ajax;及使用axios跨域后cookie无法设置,全局配置axios

    问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...

  6. Leetcode 109

    //这种也是空间复杂度为O(K)的解法,就是边界有点难写class Solution { public: vector<int> getRow(int rowIndex) { vector ...

  7. SpringMvc4.2.5 零配置出现 No mapping found for HTTP request with URI(转)

    原文地址:SpringMvc4.2.5 零配置出现 No mapping found for HTTP request with URI 采用 spring 零配置,参考 http://hanqunf ...

  8. spring-boot 全面认知

    https://blog.csdn.net/ityouknow/article/details/80490926,这个链接非常全面的讲解了spring-boot的内容,从初级到中级,到最后的提升,觉得 ...

  9. [luogu P2319] [HNOI2006]超级英雄

    [luogu P2319] [HNOI2006]超级英雄 题目描述 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金. ...

  10. [codechef July Challenge 2017] Chef and Sign Sequences

    CHEFSIGN: 大厨与符号序列题目描述大厨昨天捡到了一个奇怪的字符串 s,这是一个仅包含‘<’.‘=’和‘>’三种比较符号的字符串.记字符串长度为 N,大厨想要在字符串的开头.结尾,和 ...