DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery實現的網頁左側在線客服效果代碼
jQuery實現的網頁左側在線客服效果代碼
編輯:關於JavaScript     

本文實例講述了jQuery實現的網頁左側在線客服效果代碼。分享給大家供大家參考,具體如下:

這是又一個網頁上的在線客服代碼,不錯,可以用一下哦。與其它客服不一樣的地方呢?無非是在網頁左側滑出,可對客服類型分組,又多了一個功能,哈哈。

運行效果截圖如下:


具體代碼如下:

<!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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved