CSS3+Jquery实现带动画效果的下拉选择框

CSS3+JQuery实现带动画效果的下拉选择框。

元素结构为：

 1 <div class="box">
 2             <p>this is the first li</p>
 3             <div id="blank"></div>
 4             <ul>
 5                 <li  class="selected">this is the first li</li>
 6                 <li >Second li</li>
 7                 <li >Third li</li>
 8                 <li >Forth li</li>
 9                 <li >Fifth li</li>
10             </ul>
11  </div>

box是显示框，显示的内容是 P 标签。blank 是显示框右部的箭头，箭头效果是添加 border 属性实现的。

ul 是下拉框，初始状态下高度是0，当鼠标移动到 box 上面的时候，改变 ul 的高度。点击 li 标签之后设置 ul 的高度为0，并且设置 P 标签的内容。

当 li 标签里面的内容显示的时候，设置不同的背景颜色，所以要用 class 来区分被显示的是哪个。

给 ul 添加 transition 和 animation 属性来实现动画。

Jquery的siblings()方法能获得兄弟节点。

要注意的几点：

1: 在 li 标签添加点击事件的时候设置了 ul 的高度为0。如果只在CSS里面设置 ul 在不同状态下的不同高度而不在js里面设置高度的转换，那么在第一次点击 li 标签 ul 高度变为 0 之后， ul 的高度将会一直为 0 ，即使鼠标移动到显示框上面下拉框也不会再出现（尽管设置了 box：hover ul { height：200px }），这是因为js设置了元素的属性之后，这个样式将会嵌入到HTML代码，优先级比CSS高。所以需要在 js 中添加 box 的mouseover事件和mouseout事件，分别设置 ul 的高度为 200px 和 0 。

2:修改

.box:hover ul{
    transform-origin: 50% 0;
    animation: solid_down 0.5s ease-in;
    transition: height 0.2s;
}
里面的0.2s为其他的数值能够得到不同的效果。

HTML代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link href="DropDown.css" rel="stylesheet" type="text/css">
 7     <script src="../../Jquery/jquery-2.2.1.min.js"></script>
 8     <script src="DropDown.js"></script>
 9 </head>
10 <body>
11     <div class="content">
12         <div class="box">
13             <p>this is the first li</p>
14             <div id="blank"></div>
15             <ul>
16                 <li  class="selected">this is the first li</li>
17                 <li >Second li</li>
18                 <li >Third li</li>
19                 <li >Forth li</li>
20                 <li >Fifth li</li>
21             </ul>
22         </div>
23         <div class="content"></div>
24     </div>
25 </body>
26 </html>
View Code

CSS代码：

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 body{
 6     background-color: #adecc0;
 7 }
 8 .content{
 9     margin: 200px auto;
10 }
11 .box{
12     margin: auto auto;
13     background-color: rgb(255, 255, 255);
14     width: 250px;
15     height: 40px;
16     position: relative;
17     cursor: pointer;
18 }
19 #blank{
20     width: 10px;
21     height: 10px;
22     border-right: 1px solid #c7c7c7;
23     border-bottom: 1px solid #c7c7c7;
24     position: absolute;
25     top: 11px;
26     right: 12px;
27     transform: rotate(45deg);
28     transition: transform 0.3s ease-out;
29 }
30 .box p{
31     line-height: 40px;
32     padding-left: 20px;
33 }
34 .box ul{
35     list-style: none;
36     background-color: #ffffff;
37     overflow: hidden;
38     height: 0px;
39     transition: height 0.5s;
40     width: 100%;
41 }
42 .box ul li{
43     line-height: 40px;
44     padding-left: 20px;
45 }
46 .box ul li:hover{
47     background-color: #a6e1ec;
48 }
49 .box:hover #blank{
50     transform: rotate(-135deg);
51 }
52 .box:hover ul{
53     transform-origin: 50% 0;
54     animation: solid_down 0.5s ease-in;
55     transition: height 0.2s;
56 }
57 @-moz-keyframes solid_down {
58      0%{transform: scale(1,0)}
59      25%{transform: scale(1,1.25)}
60      50%{transform: scale(1,0.85)}
61      75%{transform: scale(1,1.05)}
62      100%{transform: scale(1,1)}
63  }
64 
65 @-webkit-keyframes solid_down {
66     0%{transform: scale(1,0)}
67     25%{transform: scale(1,1.25)}
68     50%{transform: scale(1,0.85)}
69     75%{transform: scale(1,1.05)}
70     100%{transform: scale(1,1)}
71 }
72 .content .box .selected{
73     background-color: #cbfac9;
74 }
View Code

JS代码：

 1 $(document).ready(function(){
 2     $("li").on("click",function(){
 3         var str1=this.innerHTML;
 4         $("p").html(str1);
 5         $("ul").css("height","0px");
 6         $(this).addClass("selected").siblings().removeClass("selected");
 7     });
 8     $(".box").on("mouseover",function(){
 9         $("ul").css("height","200px");
10     });
11     $(".box").on("mouseout",function(){
12         $("ul").css("height","0px");
13     });
14 });
View Code

效果：

http://39.105.101.122/myhtml/CSS/DropDown/DropDown.html

posted on 2016-04-26 12:03  辉子t1  阅读(1657)  评论(0)  编辑  收藏  举报

导航