鼠标划入一块区域高度增长弹出,划出时高度减小消失;
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>