<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.6jQuery案例六右侧在线客服</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('#serve').hover(
function(){
$(this).css('right','5px');
$('#serve .inf').height(200);
},
function(){
$(this).css('right','-127px');
$('#serve .inf').height(53);
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{ list-style:none;}
#serve{
position:absolute;
right:-127px;
top:200px;
cursor:pointer;
}
#serve li{
width:180px;
background-color:#ff4a00;
margin-bottom:2px;
text-indent:54px;
height:53px;
line-height:53px;
color:#FFF;
font-size:16px;
border-radius:3px;
overflow:hidden;
}
#serve .back{
background-image:url(images/fixCont.png);
background-repeat:no-repeat;
background-position:0 0;
}
#serve .tel{
background-image:url(images/fixCont.png);
background-repeat:no-repeat;
background-position:0 -57px;
}
#serve .online{
background-image:url(images/fixCont.png);
background-repeat:no-repeat;
background-position:0 -113px;
}
#serve .inf{
background-image:url(images/fixCont.png);
background-repeat:no-repeat;
background-position:0 -169px;
}
#serve .inf .codePic{
padding:0 25px 25px 25px;
width:130px;
}
</style>
</head>
<body>
<ul id="serve">
<li class="back">返回顶部</li>
<li class="tel">4008-123-456</li>
<li class="online">在线咨询</li>
<li class="inf">
微信二维码<br>
<img class="codePic" src="images/weixin.jpg">
</li>
</ul>
</body>
</html>
初始效果图
鼠标移入效果图
