html css jquery怎么做开门的效果

最新推荐文章于 2024-07-17 16:51:52 发布

咖啡学编程

最新推荐文章于 2024-07-17 16:51:52 发布

阅读量5k

点赞数 1

分类专栏： javascript 文章标签： jquery css3 html5 动画需求

本文链接：https://blog.csdn.net/a727911438/article/details/51960228

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近有一个客户是做售门的生意的，客户需求是：进入官网，首先要有一个门被打开（效果），然后才显示网站首页。那么，这个开门的效果要怎么做呢，我构思了一下，用jquery来做动画效果，还是挺简单的。好，不多说，先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开门效果</title>

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

    <style>

        html,body{

            height:100%;
        }

        #door-left, #door-right{

            margin:0;
            padding: 0;

            width:50%;
            height:100%;

            background-color: #663333;
        }
        #door-left{

            float:left;
        }
        #door-right{

            float:right;
        }
    </style>
</head>
<body>
    
    <div id="door-left"></div><!--左门-->

    <div id="door-right"></div><!--右门-->


    <script>

        $(document).ready(function(){    //文档加载完成后立刻执行

            $("#door-left").animate({width:"toggle"}, 2000);    //左门打开

            $("#door-right").animate({width:"toggle"}, 2000);    //右门跟左门同时打开
        });
    </script>

</body>
</html>

是不是很简单的代码，一看就懂，这归结于JQ的强大的动画功能了，短短两行就能实现效果（自从用了jq，再也回不去也不想回去折腾javascript原生代码的美好时光了）。 有需要下载jq的同学，请点击jquery-1.8.3.min.js

虽然代码简单，但是我还是要解释一下，首先，必须要将jq文件引用进来：

<head>
	<script src="jquery-1.8.3.min.js"></script>
</head>

然后，在body里面写好两个DIV，分别代表左门和右门：

<body>
	<div id="door-left"></div>

	<div id="door-right"></div>
</body>

接下来当然是写好两个门的样式，这里有个注意的点，html或body作为父容器必须要先定义高度占满屏幕，否则两个门就显示不出来：

<style>

	html,body{

		height:100%;
	}

	#door-left, #door-right{

		margin:0;
		padding: 0;

		width:50%;
		height:100%;

		background-color: #663333;
	}
	#door-left{

		float:left;
	}
	#door-right{

		float:right;
	}
</style>

最后就是完成jq的开门效果：

<script>

	$(document).ready(function(){	//文档加载完成后立刻执行

		$("#door-left").animate({width:"toggle"}, 2000);	//左门打开

		$("#door-right").animate({width:"toggle"}, 2000);	//右门跟左门同时打开
	});
</script>

完成开门效果的思路就是这样子，你可以继续优化，比如下载一张大门，P成两张，将两张图片img到div里面，改一下样式让图片铺满div，就OK啦。同理，你可以通过这样的思路和方式，和学习使用jq来实现翻页效果，侧边栏隐藏，导航下拉等等。