鼠标划入一块区域高度增长弹出,划出时高度减小消失;
2016-12-07 14:29
295 查看
css部分:
把区域固定在右下角
<style>
.contact_suspension_frame {
right: 0;
z-index: 15;
position: fixed;
bottom: 0;
}
.suspension_frame_box {
border: 1px solid #4da1e1;
background: #fafafa;
width: 175px;
position: relative;
}
.suspension_frame_box h2 {
height: 34px;
line-height: 34px;
padding: 0 3px;
font-size: 14px;
color: #fff;
background: #3399FE;
margin: 1px;
}
.suspension_frame_box h2 b {
display: inline-block;
width: 21px;
height: 22px;
vertical-align: middle;
margin-top: 1px;
background: url(images/icon/icon_sprites.png) no-repeat 0 -880px;
}
.suspension_frame_box h2 span {
vertical-align: middle;
display: inline-block;
margin-top: -1px;
height: 34px;
}
.suspension_frame_box table {
margin: 0 0 20px 14px;
text-align: left;
width: 144px;
font-size: 12px;
}
.suspension_frame_box table tr th {
padding: 5px 0;
color: #999;
font-weight: normal;
}
.suspension_frame_box table tr td {
color: #666;
}
</style>
HTML部分:
<div class="contact_suspension_frame">
<div class="suspension_frame_box" id="suspensionFrame">
<h2><b></b> <span>立即咨询价格和流程</span></h2>
<div id="contactContent" class="contactContent" style="display: none; height: 0px; overflow: hidden;">
<table>
<tbody><tr>
<th valign="middle"><img src="resources/images/icon/suspension_frame_icon03_v2.jpg" alt="电话"></th>
<td>888-888-888</td>
</tr>
<tr>
<th valign="middle"><img src="resources/images/icon/suspension_frame_icon02_v2.jpg" alt="QQ"></th>
<td>88888888</td>
</tr>
<tr>
<th valign="middle"><img src="resources/images/icon/suspension_frame_icon01_v2.jpg" alt="微信"></th>
<td><img src="resources/images/two_dimensional_code.jpg" alt="二维码"></td>
</tr>
<tr>
<th></th>
<td>
<a target="_blank" href="javascript:;">
<img src="http://wpa.qq.com/pa?p=2:800002255:41" alt="点击这里给我发消息" title="点击这里给我发消息">
</a>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
js部分:
<script>
$(".contact_suspension_frame").hover(function(){
$("#contactContent").show();
$("#contactContent").stop().animate({height:"195px"},"normal",function(){
});
},function(){
$("#contactContent").stop().animate({height:"0px"},"normal",function () {
$("#contactContent").hide();
});
});
</script>
把区域固定在右下角
<style>
.contact_suspension_frame {
right: 0;
z-index: 15;
position: fixed;
bottom: 0;
}
.suspension_frame_box {
border: 1px solid #4da1e1;
background: #fafafa;
width: 175px;
position: relative;
}
.suspension_frame_box h2 {
height: 34px;
line-height: 34px;
padding: 0 3px;
font-size: 14px;
color: #fff;
background: #3399FE;
margin: 1px;
}
.suspension_frame_box h2 b {
display: inline-block;
width: 21px;
height: 22px;
vertical-align: middle;
margin-top: 1px;
background: url(images/icon/icon_sprites.png) no-repeat 0 -880px;
}
.suspension_frame_box h2 span {
vertical-align: middle;
display: inline-block;
margin-top: -1px;
height: 34px;
}
.suspension_frame_box table {
margin: 0 0 20px 14px;
text-align: left;
width: 144px;
font-size: 12px;
}
.suspension_frame_box table tr th {
padding: 5px 0;
color: #999;
font-weight: normal;
}
.suspension_frame_box table tr td {
color: #666;
}
</style>
HTML部分:
<div class="contact_suspension_frame">
<div class="suspension_frame_box" id="suspensionFrame">
<h2><b></b> <span>立即咨询价格和流程</span></h2>
<div id="contactContent" class="contactContent" style="display: none; height: 0px; overflow: hidden;">
<table>
<tbody><tr>
<th valign="middle"><img src="resources/images/icon/suspension_frame_icon03_v2.jpg" alt="电话"></th>
<td>888-888-888</td>
</tr>
<tr>
<th valign="middle"><img src="resources/images/icon/suspension_frame_icon02_v2.jpg" alt="QQ"></th>
<td>88888888</td>
</tr>
<tr>
<th valign="middle"><img src="resources/images/icon/suspension_frame_icon01_v2.jpg" alt="微信"></th>
<td><img src="resources/images/two_dimensional_code.jpg" alt="二维码"></td>
</tr>
<tr>
<th></th>
<td>
<a target="_blank" href="javascript:;">
<img src="http://wpa.qq.com/pa?p=2:800002255:41" alt="点击这里给我发消息" title="点击这里给我发消息">
</a>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
js部分:
<script>
$(".contact_suspension_frame").hover(function(){
$("#contactContent").show();
$("#contactContent").stop().animate({height:"195px"},"normal",function(){
});
},function(){
$("#contactContent").stop().animate({height:"0px"},"normal",function () {
$("#contactContent").hide();
});
});
</script>
相关文章推荐
- 表情层弹出后,点击之外区域层消失
- Android实战(八)------点击空白可消失的弹出层dialog中显示动态高度宽度的gridview
- Dialog-点击旁边的区域Dialog弹出框不消失
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- 鼠标移上去,弹出说明框,移开则消失
- javascript轻松实现当鼠标移开时已弹出子菜单自动消失
- 读取图片,并通过鼠标交互,在图片上选择一块矩形区域,然后把这个矩形区域的子图像显示出来
- 鼠标划入划出
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
- 关于AlertDialog弹出后,触摸其他区域Dialog消失的问题
- 鼠标点击弹出层区域外关闭层
- Jquery实现鼠标移上弹出提示框,移出消失
- jquery实现鼠标点击区域外消失
- 点击按钮,在电脑右下端弹出提示框,鼠标不离开,提示框不消失。
- Jquery实现鼠标移上弹出提示框,移出消失
- jQuery实现鼠标移上弹出提示框,移出消失
- 解决ios h5 input输入框被输入法弹出一块区域
- Div弹出层-当鼠标移上去出现一个层,鼠标移开这个层消失的特效,大家可以直接拿去用
- jQuery实现鼠标移上弹出提示框,移出消失
- JavaScript 鼠标划入划出