집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 오른쪽 상단에 정지된 웹 고객 서비스 효과 코드를 구현합니다_jquery

jQuery는 오른쪽 상단에 정지된 웹 고객 서비스 효과 코드를 구현합니다_jquery

WBOY원래의: 2016-05-16 15:35:321228검색

이 기사의 예에서는 오른쪽 상단에 정지된 웹 고객 서비스 효과 코드의 jQuery 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jquery 플러그인을 사용하고 호환성이 좋은 웹페이지 온라인 고객 서비스 코드입니다. 기본적으로 고객 서비스는 사진 버튼만 표시하며 마우스로 클릭하면 전체 내용이 확장됩니다. QQ 고객 서비스, 애프터 서비스 등으로 사용할 수 있습니다. 또한 빠른 채널로 사용할 수 있습니다. 사용자가 해당 작업을 수행할 수 있도록 돕는 웹사이트입니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-right-top-wen-online-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.demo_menu{font-size: 14px;text-align: center;margin: 10px 0 0 0;color: #999;line-height: 180%;}
.demo_menu b{color: #333;}
.demo_menu a, .demo_menu a: visited{color: #F00;font-size: 14px;}
.demo_menu a: hover{color: #090;font-size: 14px;}
body{background: #ccc;}
.text{font-size: 12px;}
#kefu{position: fixed;_position: absolute;_top: expression(documentElement.scrollTop + 20 + "px");top: 20px;right: 0;z-index: 999}
#kefu .box-content{position: relative;background-color: #fff;width: 170px;}
#kefu .title-btn, #kefu .qq, #kefu .phone, #kefu .service, #kefu .on span{background: url(images/kefu.png) no-repeat}
#kefu .title-btn{width: 33px;height: 97px;position: absolute;top: 0;left: -33px;}
#kefu .title-btn span{display: none}
#kefu .on span{background-position: -129px 7px;height: 16px;display: block;}
#kefu .pad{padding: 16px 10px 10px;overflow: hidden;font-size: 12px;}
#kefu .pad a{text-decoration: none;}
#kefu .qq{background-position: 0 -118px;display: inline-block;zoom: 1;*display: inline;padding-left: 16px;}
#kefu .phone{height: 28px;background-position: 0 -153px;margin: 18px 0}
#kefu .service{display: inline-block;zoom: 1;*display: inline;height: 51px;background-position: 0 -203px;width: 151px;margin-left: 3px}
#kefu .text{background-color: #ededed;padding: 5px 10px;text-align: center}
#kefu .off{width: 0;}
#kefu .off .pad, #kefu .off .text{display: none}
p, p a{font-size: 12px;color: #666;}
</style>
<title>始终固定在网页右上角的在线客服QQ代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="kefu">
 <div class="box-content off">
  <div class="title-btn cu"><span><a href="#"></a></span></div>
  <div class="pad"> <a href="http://sighttp.qq.com/msgrd&#63;v=3&uin=12345678&site=qq&menu=yes" class="qq" style="margin-right:16px">售前咨询</a><a href="http://sighttp.qq.com/msgrd&#63;v=3&uin=12345678&site=qq&menu=yes" class="qq">广告-合作</a>
   <div class="phone"></div>
   <a href="#" class="service" target="_blank"></a> </div>
  <div class="text"> 客服时间：(9:00-18:00)<br>
   （周六日休息） </div>
 </div>
</div>
<script type="text/javascript"> 
$(".select").hover(
 function () {
  $(this).find(".msgNav").show();
 },
 function () {
  $(this).find(".msgNav").hide();
 }
);
$(".title-btn").toggle(
 function () {
  $(this).addClass("on");
    $(this).parent(".box-content").removeClass("off");
 },
 function () {
  $(this).removeClass("on");
    $(this).parent(".box-content").addClass("off");
 }
);
</script>
</body>
</html>

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript 코드는 웹 페이지 콘텐츠 복사를 쉽게 금지합니다(심플 코드)_javascript 기술다음 기사：JavaScript 코드는 웹 페이지 콘텐츠 복사를 쉽게 금지합니다(심플 코드)_javascript 기술

jQuery는 오른쪽 상단에 정지된 웹 고객 서비스 효과 코드를 구현합니다_jquery

관련 기사