CSS3实现整屏切换效果_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3实现整屏切换效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:42 AM

总是能看见很多广告或者网站都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。最近刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。

页面结构

实现思路与大众方法类似，如图

每个section就是一页内容，它的大小充满了屏幕（红色区域），一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面好像上移了，container向上走，页面就下移了。
html结构如下：

<!DOCTYPE html><html><head lang="ch">    <meta charset="UTF-8">    <!--适配移动端-->    <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0">    <title></title>    <style> body, html{ padding: 0; margin: 0; } body, html { height: 100%; /**隐藏滚动条**/ overflow: hidden; } #container, .section { height: 100%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; } </style></head><body><div id="container">    <div class="section" id="section0"></div>    <div class="section" id="section1"></div>    <div class="section" id="section2"></div>    <div class="section" id="section3"></div></div></body></html>

事件监听

此时窗口里只显示一个页面，我们给其加上滚动监听，因为firefox和非firefox浏览器对滚动监听支持不同，firefox浏览器向上滚动是-120，向下滚动是120，而其他浏览器向上是5，向下是-5，所以需要作判断：

<script src="http://code.jquery.com/jquery-latest.js"></script><script> //当前页面索引 var curIndex = 0; var scrollFunc = function (e) { e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ } function movePrev(){ } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome } init(); </script>

为了防止在第一个页面用户上滚，最后一个页面用户下滚，所以用curIndex代表当前页面索引在滚动时作了监听，当然如果要使页面循环滚动，只需修改条件限制即可。

加入动画

动画使用到了css3里的transform属性的translate3D，我们首先需要获取到屏幕的高度，然后当页面切换的时候将container上移一个屏幕高度或下移一个屏幕高度。
使用translate3D的原因是在手机端会开启硬件加速，使动画更流畅，它接收三个参数，分别是x轴、y轴和z轴的位移。如

transform: tanslate3D(10px, 30px, 0);

修改后的js代码如下：

<script> //当前页面索引 var curIndex = 0; //container元素 var container = $("#container"); //页面总数 var sumCount = $(".section").length; //窗体元素 var $window = $(window); //动画时间 var duration = 500; var scrollFunc = function (e) { e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)"); } function movePrev(){ container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)"); } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome //设置动画 container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); } </script>

为了防止页面在滚动的时候用户继续滚动打乱节奏，可以用时间来强制控制，即在滚动期间不允许调用moveNext和movePrev函数，最终代码如下：

<!DOCTYPE html><html><head lang="ch">    <meta charset="UTF-8">    <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0">    <title></title>    <style> body, html{ padding: 0; margin: 0; } body, html { height: 100%; overflow: hidden; } #container, .section { height: 100%; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; } </style></head><body><div id="container">    <div class="section" id="section0"></div>    <div class="section" id="section1"></div>    <div class="section" id="section2"></div>    <div class="section" id="section3"></div></div><script src="http://code.jquery.com/jquery-latest.js"></script><script> var curIndex = 0; var container = $("#container"); var sumCount = $(".section").length; var $window = $(window); var duration = 500; //时间控制 var aniTime = 0; var scrollFunc = function (e) { //如果动画还没执行完，则return if(new Date().getTime() < aniTime + duration){ return; } e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ //获取动画开始时的时间 aniTime = new Date().getTime(); container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)"); } function movePrev(){ //获取动画开始时的时间 aniTime = new Date().getTime(); container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)"); } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); } init(); </script></body></html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。