利用jQ和H5C3制作的动态动画网页布局

最新推荐文章于 2024-03-29 06:10:55 发布

丸子哥哥

最新推荐文章于 2024-03-29 06:10:55 发布

阅读量1k

点赞数

分类专栏： jQuery入门 CSS HTML入门项目锻炼文章标签： jQ和H5C3动画布局 H5C3动画

本文链接：https://blog.csdn.net/qq_36818386/article/details/82530627

版权

项目锻炼同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

HTML入门

6 篇文章 0 订阅

订阅专栏

效果图：

CSS源码：

*
{
	margin: 0px;
	padding: 0px;
}
ul,li
{
	list-style: none;
}
.box
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.box2
{
	width: 100%;
	height: 500px;
	background-color: darkred;
}
.box2 .inner
{
	position: relative;
	width: 1400px;
	height: 500px;
	background-color: darkred;
	margin: 0 auto;
}
.box2 .inner h1
{
	position: absolute;
	top: 150px;
	left: 200px;
	color: aqua;
	font-size: 70px;
}
.page2
{
	width: 100%;
	height: 800px;
	background-color: darkgoldenrod;
}
.page2 .inner
{
	width: 1400px;
	height: 100%;
	background-color: darkolivegreen;
	margin: 0 auto;
}
.page2 .inner ul li
{
	float: left;
	width: 230px;
	height: 350px;
	background-color: aqua;
	margin: 20px;
}
.page3
{
	width: 100%;
	height: 700px;
	background-color: orange;
}
.page3 .inner
{
	position: relative;
	width: 1400px;
	height: 100%;
	background-color: wheat;
	margin: 0 auto;
}
.page3 .inner .cur
{
	position: absolute;
	width: 240px;
	height: 240px;
	background-color: rebeccapurple;
	left:640px;
	top: 260px;
}
.page3 .inner li
{
	float: left;
	width: 150px;
	height: 150px;
	background-color: rebeccapurple;
	margin: 30px;
}
.page3 .inner li:nth-child(2)
{
	position: absolute;
	left: 200px;
	top: 500px;
}
.page3 .inner li:nth-child(3)
{
	position: absolute;
	left: 1000px;
	top: 500px;
}
.page3 .inner li:nth-child(4)
{
	position: absolute;
	left: 1000px;
	top: 200px;
}
.page3 .inner li:nth-child(5)
{
	position: absolute;
	left: 200px;
	top: 200px;
}
.page3 .inner li:nth-child(6)
{
	position: absolute;
	left: 650px;
	top: 80px;
}
.page3 .inner li:nth-child(7)
{
	position: absolute;
	left: 650px;
	top: 510px;
}
.page4
{
	position: relative;
	width: 100%;
	height: 600px;
	background-color: darkolivegreen;
}
.page4 .inner
{
	width: 1400px;
	height: 100%;
	background-color: darkred;
	margin: 0 auto;
}
.page4 .inner li
{
	float: left;
	height: 500px;
	width: 400px;
	background-color: silver;
	margin: 20px;
	margin-top: 50px;
}
.page5
{
	position: relative;
	width: 100%;
	height: 600px;
	background-color: orange;
	perspective: 1000px;
}
.page5 .inner
{
	position: relative;
	width: 1400px;
	height: 100%;
	background-color: chartreuse;
	margin: 0 auto;
}
.page5 .inner .text
{
	position: absolute;
	font-size: 140px;
	text-align: center;
	top: 200px;
	left: 250px;
}
.page5 .inner .text span
{
	display: inline-block;
}
.page6
{
	position: relative;
	width: 100%;
	height: 600px;
	background-color: darkolivegreen;
	perspective: 1000px;
}
.page6 .inner
{
	position: relative;
	width: 1400px;
	height: 100%;
	background-color: rebeccapurple;
	margin: 0 auto;
}
.page6 .inner img
{
	width: 300px;
	height: 500px;
	position: absolute;
	left: 600px;
	top: 100px;
}

HTML和jQ源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
    <div class="box">
        <!--首页大盒子-->
        <div class="box2">
            <div class="inner">
                <h1>jQ和H5C3制作的动态动画网页布局</h1>
            </div>
        </div>

        <!--第二个盒子-->
        <div class="page2 page">
            <div class="inner">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!--第三个盒子-->
        <div class="page3 page">
            <div class="inner">
                <ul>
                    <li class="cur"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!--第四个盒子-->
        <div class="page4 page">
            <div class="inner">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!--第五个盒子-->
        <div class="page5 page">
            <div class="inner">
                <div class="text">
                    <span>我</span>
                    <span>们</span>
                    <span>是</span>
                    <span>最</span>
                    <span>棒</span>
                    <span>的</span>
                </div>
            </div>
        </div>

        <!--第六个盒子-->
        <div class="page6 page">
            <div class="inner">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>

        //第一个动画
        /*第一个动画的初始位置*/
        function anim1()
        {
	        $(".page2 .inner li").css({
		        "transform" : "translateX(-2000px)",
		        "opacity": 0
	        });

	        setTimeout(function ()
	        {
		        $(".page2 .inner li").each(function (i)
		        {
			        $(this).css({"transition":"all 3s ease " +i * 0.5+"s"});
		        })

		        /*第一个动画的结束位置*/
		        $(".page2 .inner li").css(
			        {
				        "transform" : "none",
				        "opacity": 1
			        });
	        },200);
        }


        //第二个动画
        //大块初始位置
        function anim2()
        {
	        $(".page3 .cur").css({
		        "transform" : "scale(0) rotate(720deg)"
	        });
	        $(".page3 li").css({
			        "opacity" : 0
		        }
	        );
	        setTimeout(function () {
		        $(".page3 .cur").css({
			        "transition" : "all 3s ease 0s"
		        });
		        $(".page3 li").css({
			        "transition" : "all 4s ease 0s"
		        });

		        //大块最终位置
		        $(".page3 .cur").css({
			        "transform" : "none"
		        });
		        //小块最终位置
		        $(".page3 li").css({
			        "opacity" : 1
		        });

	        });
        }


        //第三个动画
        //开始位置
        function anim3()
        {
	        $(".page4 ul li").eq(0).css({
			        "transform" : "translateX(-2000px)"
		        }
	        );
	        $(".page4 ul li").eq(1).css({
			        "transform" : "translateY(2000px)"
		        }
	        );
	        $(".page4 ul li").eq(2).css({
			        "transform" : "translateX(2000px)"
		        }
	        );

	        setTimeout(function () {
		        $(".page4 ul li").css({
			        "transition" : "all 3s ease 0s"
		        });

		        //结束位置
		        $(".page4 ul li").css({
			        "transform" : "none"
		        });
	        });
        }


        //第四个动画
        function anim4()
        {
	        $(".page5 .inner  .text span").css({
		        "transform" : "translateZ(2000px)"
	        });

	        setTimeout(function () {
		        $(".page5 .inner  .text span").each(function (i) {
			        $(this).css({
				        "transition" : "all 3s ease "+i * 0.3+"s"
			        });
		        });

		        $(".page5 .inner  .text span").css({
			        "transform" : "none"
		        });
	        });
        }

        //第五个动画
        function anim5()
        {
	        $(".page6 .inner img").css({
		        "transform" : "translateX(500px) translateZ(200px) rotateX(360deg) rotateY(300deg)",
		        "opacity" : 0
	        });

	        setTimeout(function () {
		        $(".page6 .inner img").css({
				        "transition" : "all 2s ease 0s"
			        }
		        );

		        $(".page6 .inner img").css({
			        "transform" : "none",
			        "opacity" : 1
		        });
	        });
        }

        //将每个动画放到一个数组里面
        var arrAnim = [, anim1, anim2, anim3, anim4, anim5];

        var pageTop = []; //页面到顶部的数组

        $(".page").each(function (i) {
	        pageTop.push($(this).offset().top);
        });

        var idx = 0;
        //滚动事件
        $(window).scroll(function () {
	        var h = $(window).scrollTop();

	        for(var i = 0; i < pageTop.length; i++)
            {
                if(h > pageTop[i] - 1200 && typeof arrAnim[i] == "function")
                {
                    arrAnim[i]();
                }
            }
        });

    </script>
</body>
</html>

丸子哥哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用jQ和H5C3制作的动态动画网页布局

效果图： CSS源码：*{ margin: 0px; padding: 0px;}ul,li{ list-style: none;}.box{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}.box2{ width: 100%; height: 500px;...
复制链接

扫一扫