jQuery_jquery로 구현된 웹페이지 왼쪽의 온라인 고객 서비스 효과 코드
- WBOY원래의
- 2016-05-16 15:35:241729검색
이 글의 예시에서는 jQuery로 구현한 웹페이지 왼쪽의 온라인 고객 서비스 효과 코드를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
웹페이지에 있는 또 다른 온라인 고객 서비스 코드를 사용하시면 됩니다. 다른 고객 서비스 서비스와 무엇이 다른가요? 고객 서비스 유형을 그룹화하기 위해 웹페이지 왼쪽에서 슬라이드하는 것 외에는 다른 기능이 없습니다. 하하.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-left-online-kf-demo/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页左侧浮动jquery在线QQ客服代码</title>
<style>
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/* QQbox */
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px 0 0 0;position:fixed;}
*html, *html body{background-image:url(about:blank);background-attachment:fixed;}
*html .QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox .press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox .Qlist{float:left;width:410px;background:url(images/bj01.png) no-repeat;background-position:1px 0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox .Qlist .infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox .Qlist .con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox .Qlist .con ul li{height:31px;list-style:none;margin-left:35px;}
.QQbox .Qlist .con ul li a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png) no-repeat;margin-top:-45px;margin-left:220px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="divQQbox" class="QQbox">
<div id="divOnline" class="Qlist">
<div class="OnlineLeft">
<div class="con">
<ul>
<li>售前咨询<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>网站建设<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>网站优化<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>整合营销<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>售后服务<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
</ul>
</div>
</div>
<div class="OnlineBtn">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//建站热线展开效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false);
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-276},149);
}
)
});
</script>
</body>
</html>
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.