本文实例讲述了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程序设计有所帮助。
本文向大家介绍jQuery实现的网页右下角tab样式在线客服效果代码,包括了jQuery实现的网页右下角tab样式在线客服效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码。分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体
本文向大家介绍jQuery实现悬浮在右上角的网页客服效果代码,包括了jQuery实现悬浮在右上角的网页客服效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码。分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错。默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售
本文向大家介绍jQuery实现仿QQ在线客服效果的滚动层代码,包括了jQuery实现仿QQ在线客服效果的滚动层代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码。分享给大家供大家参考。具体如下: 这是一款jQuery滚动层,可以做成仿QQ在线客服,虽然效果有点生硬,但水平就这么高了,弹出层是挺实用的,期待大家有新的改进。 运行效果截图如下:
本文向大家介绍js实现浮动在网页右侧的简洁QQ在线客服代码,包括了js实现浮动在网页右侧的简洁QQ在线客服代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码。分享给大家供大家参考。具体如下: 这是一个简洁版的QQ在线客服,其实重要的是这个JS函数,只要有了这个JS函数,实际上你完全可以写一个这样的在线客服,它是用JS+CSS去控制层的隐藏与展开
本文向大家介绍JS实现新浪博客左侧的Blog管理菜单效果代码,包括了JS实现新浪博客左侧的Blog管理菜单效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现新浪博客左侧的Blog管理菜单效果代码。分享给大家供大家参考,具体如下: 这里介绍新浪博客左侧的Blog管理菜单,我们变通一下,如果你在设计程序,那么本款菜单用到后台管理中想必应该很合适吧,图片是调用新浪的,用了比较多的图
本文向大家介绍jquery实现隐藏在左侧的弹性弹出菜单效果,包括了jquery实现隐藏在左侧的弹性弹出菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果。分享给大家供大家参考。具体如下: 这是一款隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JavaScript缓冲动画的典型教程。本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一