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>
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 }
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 });
效果：
http://39.105.101.122/myhtml/CSS/DropDown/DropDown.html
CSS3+Jquery实现带动画效果的下拉选择框的更多相关文章
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- CSS3不一样的下拉选择框
本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）
[源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- java、easyui-combotree树形下拉选择框
最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
随机推荐
- 关于Cookie要懂的知识
☞演示 什么是Cookie? http是一个无状态协议,它不对之前发生过的请求和响应的状态进行管理.这样就可能导致,我们登陆一个网站后,每次跳转新页面,之前的登陆状态都不能被记住,要重新登陆等问题. ...
- sqlite4操作
目录 SQLite数据库(一):基本操作... 1 目录... 1 一.SQLite介绍... 2 1. 什么是SQLite. 2 2. 什么是数据库... 2 3. 数据库是如何存 ...
- pandas之使用自定义函数
如果想要应用自定义的函数,或者把其他库中的函数应用到 Pandas 对象中,有以下三种方法: 1) 操作整个 DataFrame 的函数:pipe() 2) 操作行或者列的函数:apply() 3) ...
- MordernC++之左值（引用）与右值（引用）
左值与右值 C++中左值与右值的概念是从C中继承而来,一种简单的定义是左值能够出现再表达式的左边或者右边,而右值只能出现在表达式的右边. int a = 5; // a是左值,5是右值 int b = ...
- day17:内置方法&math模块&random模块&pickle模块
内置方法 1.round:四舍五入 正常遵守四舍五入,但在n.5结构中,n为偶数则舍去,n为奇数则进一. res1 = round(4.51) # 5 res2 = round(4.5) # 4 re ...
- oracle数据对比--用户,索引,分区,dblink,同义词,视图
问题描述:需要对比用户数据一般在数据库迁移之后,需要对比一下两个库之间的差距,如果登上去一条命令的执行,去统计,就会比较麻烦,这里整理了一些脚本可用.通过创建dblink的方式快速查询,也可以整合到一 ...
- MySQL 中常见的几种高可用架构部署方案
MySQL 中的集群部署方案 前言 MySQL Replication InnoDB Cluster InnoDB ClusterSet InnoDB ReplicaSet MMM MHA Galer ...
- CefSharp自定义缓存实现
大家好,我是沙漠尽头的狼. 上文介绍了<C#使用CefSharp内嵌网页-并给出C#与JS的交互示例>,本文介绍CefSharp的缓存实现,先来说说添加缓存的好处: 提高页面加载加速:Ce ...
- [C++核心编程] 4.2、类和对象-对象的初始化和清理
文章目录 4.2 对象的初始化和清理 4.2.1 构造函数和析构函数 4.2.2 构造函数的分类及调用 4.2.3 拷贝构造函数调用时机 4.2.4 构造函数调用规则 4.2.5 深拷贝与浅拷贝 4. ...
- 2023 Hubei Provincial Collegiate Programming Contest题解 C F H I J K M
补题链接:https://codeforces.com/gym/104337 原文链接:https://www.eriktse.com/algorithm/1136.html M. Different ...