本文实例讲述了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码。分享给大家供大家参考,具体如下:
这是一个黑色的QQ客服代码,显示在网页右侧,点击后会向左展开QQ客服的完整内容,适用的网站范围广,以前发过不少的在线客服,每一款都风格不同,你可以在网页特效栏目搜索“在线客服”看下有你需要的不。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-right-show-qq-online-kf-codes/
具体代码如下:
<!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>一款黑色简洁大气的在线客服代码</title> <style> *{margin: 0;padding: 0;} body{text-align: left;font-size: 12px;} .kefu_cs{background: rgba(51, 51, 51, 0.9);position: fixed;top: 130px;right: 1px;_position: absolute;z-index: 999;filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E5333333', endColorstr='#E5333333');} .kefu_cs a{color: #00A0E9;} .kefu_cs a: hover{color: #ff8100;text-decoration: none;} .kefu_cs .floatL{width: 36px;float: left;position: relative;z-index: 1;} .kefu_cs .floatL a{font-size: 0;text-indent: -999em;display: block;} .kefu_cs .floatR{width: 130px;float: left;padding: 5px;overflow: hidden;} .kefu_cs .floatR .cn{background: #F7F7F7;} .kefu_cs .cn h3{font-size: 14px;color: #333;font-weight: 600;line-height: 24px;padding: 5px} .kefu_cs .cn ul{padding: 0 0 0 8px;} .kefu_cs .cn ul li{line-height: 38px;height: 38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;} .kefu_cs .cn ul li span{color: #777;} .kefu_cs .cn ul li img{vertical-align: middle;} .kefu_cs .btnOpen, .kefu_cs .btnCtn{position: relative;z-index: 9;top: 0;left: 0;background-image: url(images/kefu.png);background-repeat: no-repeat;display: block;width: 20px;height: 146px;padding: 8px;} .kefu_cs .btnOpen{background-position: 0px 0;} .kefu_cs .btnCtn{background-position: -35px 0;} .kefu_cs ul li.top{border-bottom: solid #ACE5F9 1px;} .kefu_cs ul li.bot{border-bottom: none;} </style> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">希望本文所述对大家jQuery程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本
- 《十年经典成名好歌 高品质最佳音乐 2CD》[WAV/分轨][1GB]
- 《8个男人的故事 2CD》[WAV/分轨][1GB]
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览