<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>另外一种简洁易用的win8风格在线客服代码</title>
<link rel="stylesheet" href="css/style.css">
*{margin:0;padding:0;list-style: none;}
/*客服样式*/
#lanren{width:112px;position:fixed;right:-80px;top:50%;margin-top:-220px;z-index:999;}
#lanren .kfleft{width:32px;height:168px;background:url(../images/kefu.png) no-repeat;cursor:pointer;float:left;}
#lanren ul{width:80px;height:566px;background:url(../images/kefu1.png) no-repeat;float:left;}
#lanren ul li a{width:80px;height:80px;display:block;margin-bottom:1px;background:#EEE;-moz-opacity:0.4;filter:alpha(opacity=40);opacity:0.4;}
#lanren ul li a:hover{-moz-opacity:0;filter:alpha(opacity=0);opacity:0;transition:all 0.5s linear;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;}
/*ie6*/
*html{overflow:hidden;}
*html #lanren{position:absolute;right:expression(eval(document.documentElement.scrollLeft))-80;top:expression(eval(document.documentElement.scrollTop))-283;}
</head>
<body>
<div style="height:1000px;"></div>
<!-- 代码部分begin -->
<div id="lanren">
<div class="kfleft" title="点击查看联系方式"></div>
</div>
<script src="js/jQuery.js"></script>
<script>
$(function(){
$(".kfleft").on("click",function(){
var target = $("#lanren");
var distance = target.css("right");
if (distance == '0px'){
target.animate({right:-80}, 200);
} else {
target.animate({right:0}, 200);
}
});
})
</script>
<!-- 代码部分end -->
</body>
</html>
661
05-03
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
