您的位置：首页 > Web前端 > JQuery

html css jquery怎么做开门的效果

2016-07-19 22:45 525 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航