jquery网页右侧悬浮动感在线客服QQ代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。<div id="online_service_bar"> <div id="online_service_minibar"></div> <div id="online_service_fullbar"> <div class="service_bar_head"><span id="service_bar_close" title="点击关闭">点击关闭</span></div> <div class="service_bar_main"> <ul class="service_menu"> <li class="hover"> <dl> <dd> <a target="_blank" href="#"><img width="74" height="22" border="0" src="#"/></a> <a target="_blank" href="#"><img width="74" height="22" border="0" src="#"/></a> <a target="_blank" href="#"><img width="74" height="22" border="0" src="#"/></a> </dd> </dl> </li> </li> </ul> </div> </div></div>

4、书写css代码。#online_service_bar { font-size: 12px; color: #555; font-family: "Microsoft YaHei", Verdana, "BitStream vera Sans", Tahoma, Helvetica, Sans-serif; }#online_service_bar a { color: #555; text-decoration: none; }#online_service_bar a:hover { color: #E21F2B; text-decoration: none; }#online_service_bar img { border: none; vertical-align: middle; }#online_service_bar dl, #online_service_bar dd, #online_service_bar ul, #online_service_bar li { margin: 0; padding: 0; list-style: none; }/*在线客服边栏*/#online_service_bar { position: absolute; top: -150px; right: 0; overflow: hidden; z-index: 1001; }#online_service_fullbar { display: none; width: 138px; padding-bottom: 10px; background: url(../images/footer.gif) no-repeat left bottom; }.service_bar_head { text-indent: -9999px; width: 138px; height: 58px; position: relative; background: url(../images/header.gif) no-repeat left top; }.service_bar_main { width: 106px; padding: 5px 12px; background: url(../images/main.gif) repeat-y left top; }#service_bar_close { position: absolute; width: 35px; height: 35px; top: 0; right: 0; cursor: pointer; display: block; text-indent: -9999px; }/*在线客服边栏收缩状态*/#online_service_minibar { margin-top: 150px; width: 23px; height: 80px; background: url(../images/mini.gif) no-repeat right top; display: none; cursor: pointer; }/*客服菜单列表*/.service_menu { font-size: 12px; width: 106px; overflow: hidden; }.service_menu li { width: 106px; display: inline; overflow: hidden; }.service_menu li dt { text-align: left; margin-bottom: 5px; padding: 8px 10px 6px 10px; *padding:9px 10px 5px 10px;background: url(../images/menu.gif) no-repeat top center; cursor: pointer; }.service_menu li dd { display: none; text-align: center; }.service_menu li dd a img { margin-bottom: 5px; }.service_menu li.hover dt { color: #E21F2B; }.service_menu li.hover dd { padding: 5px 0; line-height: 20px; }.qq_btn { display: block; padding: 4px; }.service_tel { font-size: 12px; font-family: "Microsoft YaHei", Verdana, "BitStream vera Sans", Tahoma, Helvetica, Sans-serif; padding-left: 22px; height: 28px; line-height: 28px; background: url(../images/tel.png) no-repeat 5px center; }

5、书写并添加js代码。<script src="js/jquery-1.3.2.min.js"></script><script>var default_view = 1; <!--1是默认展开，0是默认关闭，新开窗口看效果，别在原页面刷新--></script><script>var isChrome = navigator.userAgent.toLowerCase().match(/chrome/) != null;$(function() { bindCloseBtn('#service_bar_close'); //为ID为close的DIV添加点击事件 bindMiniBtn('#online_service_minibar', '#online_service_fullbar'); //绑定Mini按钮事件 bindGroupBtn('.service_menu li dl dt'); //光标经过显示分组 showDefaultView(default_view); //展开方式 $('.service_menu li.hover dl dd').show(); scrollAd('#online_service_bar'); //当页面大小改变时 $(window).scroll(function() { scrollAd('#online_service_bar'); });});//显示展开或收缩状态function showDefaultView(status) { var cookieValue = getCookie('online_service_status'); if (cookieValue != "") { status = cookieValue; } if (status == 1) { $('#online_service_minibar').hide(); $('#online_service_fullbar').show(); } else { $('#online_service_fullbar').hide(); $('#online_service_minibar').show(); } addCookie('online_service_status', status, 720);}//为ID为close的DIV添加点击事件function bindCloseBtn(obj) { $(obj).click(function() { $('#online_service_fullbar').hide(1000, function() { if (isChrome) { $('#online_service_minibar').show(); } else { $('#online_service_minibar').show(500); } addCookie('online_service_status', 0, 720); }); });}//绑定Mini按钮事件function bindMiniBtn(hideObj, showObj) { $(hideObj).bind('mouseover', function() { showMiniBar(hideObj, showObj); addCookie('online_service_status', 1, 720); });}//光标经过显示分组function bindGroupBtn(obj) { $(obj).hover(function() { var pobj = $(this).parent().parent(); $(pobj).stop(); $(pobj).siblings(".hover").removeClass('hover'); showServiceMenu(pobj); }, function() { $(this).parent().parent().stop(); });}//显示Mini样式function showMiniBar(hideObj, showObj) { $(hideObj).hide(500, function() { if (isChrome) { $(showObj).show(); } else { $(showObj).show(500); } });}//显示当前菜单function showServiceMenu(obj, speed) { speed = speed || 500; $(obj).addClass('hover').children('dl').children('dd').slideDown(speed); $(obj).siblings().children('dl').children('dd').slideUp(speed);}//定义一个名字为scrollAD的函数function scrollAd(obj) { //定义位移为floatdiv的高度加上滚动条的顶部距离 var offset = $(obj).height() + $(document).scrollTop() - 30; //为floatdiv添加动画为TOP位移offset的高度，持续0.8秒。 $(obj).stop().animate({ top: offset }, 1000);}//写Cookiefunction addCookie(objName, objValue, objHours) { var str = objName + "=" + escape(objValue); if (objHours > 0) {//为0时不设定过期时间，浏览器关闭时cookie自动消失 var date = new Date(); var ms = objHours * 3600 * 1000; date.setTime(date.getTime() + ms); str += "; expires=" + date.toGMTString(); } document.cookie = str;}//读Cookiefunction getCookie(objName) {//获取指定名称的cookie的值 var arrStr = document.cookie.split("; "); for (var i = 0; i < arrStr.length; i++) { var temp = arrStr[i].split("="); if (temp[0] == objName) return unescape(temp[1]); } return "";}</script>

6、代码整体结构。

7、查看效果。