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

效果图：

代码：

<!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.οnlοad= 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 ieevent=window.event;if(event.wheelDelta){//ie,operadelta=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

转载于:https://www.cnblogs.com/telwanggs/p/7112307.html

页面平滑过渡全屏切换相关推荐

  1. h5全屏切换滚动页面html,H5全屏切换

    之前有做过一个微信中的H5小项目,其中有一个交互就是点击完按钮,页面由下往上滑动切换至下一页.做完后发现在Android(华为荣耀5a.华为荣耀3c和OPPO A37m)下效果都还好,但在iphone ...

  2. dplayer js控制 自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...

    最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...

  3. vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等

    安装 npm install screenfull --save 使用方法 import screenfull from "screenfull"; 属性 screenfull.i ...

  4. 【3D商城】鼠标滚动控制全屏切换

    [3D商城]鼠标滚动控制全屏切换 ajax请求获取服务器数据 设置加载loading组件 产品列表和场景列表的编写 监听鼠标滚动事件 列表标签中显示设置隐藏属性 头部标签中显示设置隐藏属性 结果 aj ...

  5. 为所有弹窗增加全屏切换功能

    1.现状 在开发两个管理系统,现在的页面20+,其中包含不少的弹窗.在项目开发过程中没人提过弹窗要全屏的事情,且在数据量较大的位置已经增加了可全屏的入口.但老板两次说为什么不给所有的弹窗增加全屏的功能 ...

  6. 远程桌面退出全屏/不能全屏/全屏切换的技巧

    远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏 问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑.想知道如 ...

  7. VirtualBox全屏切换

    用VirtualBox的时候,如果设置为全屏,想再切换回来,没有什么菜单,只有通过键盘的快捷键来操作,才可以恢复. 我常常忘掉,所以老是得去找,以后需要记住这几个按键的快捷键. 1.全屏与非全屏切换: ...

  8. 视频全屏非全屏切换，状态栏动态显示隐藏兼容性解决

    列表中视频全屏/非全屏切换时,需要动态显示/隐藏状态栏 View类提供了setSystemUiVisibility和getSystemUiVisibility方法,这两个方法实现对状态栏的动态显示或隐 ...

  9. PPAPI插件的全屏切换处理

    有时你会想让PPAPI插件全屏(比如播放视频时),这次来看看怎么做. PPAPI和CEF App两侧都要处理. foruok原创,转载请注明出处.欢迎关注foruok的订阅号"程序视界&qu ...

最新文章

  1. GA（遗传算法）的Matlab程序原理（from:六分之一工作室）
  2. 来看看C# ObservableCollection和List的区别
  3. 新手用python2还是3-Python 使用情况调查：2还是3？（附致歉声明）
  4. WebAssembly和Blazor：解决了一个存在十年的老问题
  5. 细说ReactiveCocoa的冷信号与热信号（三）：怎么处理冷信号与热信号
  6. 索引的使用规则和设计考虑
  7. Java G1 GC 垃圾回收深入浅出
  8. 每日算法系列【LeetCode 1053】交换一次的先前排列
  9. Python中的字典数据结构
  10. JAVA JDK API查看方法
  11. 学汽车故障计算机排除怎么样,汽车故障清除后就没事了么？
  12. ECharts实现数据可视化入门教程（超详细）
  13. java写颜色识别_Java+Opencv 颜色识别
  14. xp系统打开计算机硬盘分区,详解WindowsXP硬盘分区步骤
  15. 撒大飒飒撒大声地撒萨达
  16. 【Python 邮件合并 pandas mailmerge】
  17. linux系统下一页,linux下一页
  18. 惠普HP Deskjet F4238 多功能一体机驱动
  19. 笔记本电脑怎样当无线服务器,笔记本当无线路由器怎么设置【详细步骤】
  20. Android 9.0 flash播放器播放swf源码讲解

热门文章

  1. linux内核数据结构实现--链表、队列和哈希
  2. matlab中tr什么意思,tr命令详解
  3. python的numpy库结构_NumPy构成了数据科学领域中许多Python库的基础。
  4. 13000.tcp服务器简易示例程序(linux)
  5. spring事务管理器的作用_【面试必问】Spring中的事务管理详解
  6. 思维导图_教学工具思维导图
  7. Linux内核分析 - 网络[一]：收发数据包的调用
  8. mini2440驱动分析之触摸屏
  9. OpenCV的DNN模块
  10. 长沙中职英语计算机等级考试查询,湖南省中等职业教育公共基础课达标训练英语291-300...