全屏页面切换demo

最新推荐文章于 2020-07-31 10:12:54 发布

丶阿喜z

最新推荐文章于 2020-07-31 10:12:54 发布

阅读量1.5k

点赞数 1

分类专栏： Front 文章标签： html 全屏切换效果 javascript

本文链接：https://blog.csdn.net/wuya814070935/article/details/48157407

版权

该博客演示了如何使用HTML和JavaScript实现全屏页面切换的效果，需依赖jQuery库。提供了运行示例。

摘要由CSDN通过智能技术生成

实现全屏切换效果（注意导入jqeury.js）

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面切换</title>
    <style type="text/css">
        h1,body,html{
            padding: 0;
            margin: 0;
        }
        body{
            font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        h1{
            font-size: 6em;
            font-weight: normal;
        }
        p{
            font-size: 2em;
            margin:0.5em 0 2em 0;
        }
        #container,.section{
            height: 100%;
            position: relative;
        }
        #section0,
        #section1,
        #section2,
        #section3{
            background-color: #000;
            background-size: cover;
            background-position: 50% 50%;
        }
        #section0{
            background-image: url(images/1.jpg);
            color: #fff;
            text-shadow:1px 1px 1px #333;
        }
        #section1{
            color: #fff;
            text-shadow:1px 1px 1px #333;
            background-image: url(images/2.jpg);
        }
        #section2{
            background-image: url(images/3.jpg);
            color: #fff;
            text-shadow:1px 1px 1px #666;
        }
        #section3{
            color: #008283;
            background-image: url(images/4.jpg);
            text-shadow:1px 1px 1px #fff;
        }
        #section0 p{
            color: #F1FF00;
        }
        #section3 p{
            color: #00A3AF;
        }
        .left{
            float: left;