最近有一个客户是做售门的生意的，客户需求是：进入官网，首先要有一个门被打开（效果），然后才显示网站首页。那么，这个开门的效果要怎么做呢，我构思了一下，用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来实现翻页效果，侧边栏隐藏，导航下拉等等。
2845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
