当前位置:96看吧 > 实用代码 > 客服代码 > 网页客服代码_jQuery网页特效

网页客服代码_jQuery网页特效

时间:2013/08/07
作者:MaWendong.CN
来源:96看吧
查看:
标签:客服代码

网页客服代码

该客服代码是网站最常见的jQuery网页客服代码,使用jQuery网页特效+CSS样式实现。具有右侧浮窗及回顶部的两点功能。96看吧推荐。

客服代码使用方法:

1.引用样式代码

  1. <style type="text/css"> 
  2. #cleft_box{position:absolute;right:0px;top:200px;padding:0px;margin:0px;overflow:hidden;width:36px} 
  3. .cleft_inner{margin:0px;padding:0px;overflow:hidden;width:166px} 
  4. .inner_btn{width:36px;height:74px;color:#fff;font-size:14px;font-weight:bold;text-align:center;margin-top:15px;padding-top:35px;cursor:pointer;cursor:pointer;float:left;background:url(images/rtitleico.png) left top no-repeat} 
  5. .inner_btn span{layout-flow:vertical-ideographic} 
  6. .inner_info{width:128px;overflow:hidden;float:right;background:none} 
  7. .inner_tit{margin:0 auto;padding-left:20px;height:30px;background:url(images/leftbg.png) left top no-repeat;overflow:hidden;width:128px} 
  8. .inner_list{text-align:center;width:128px;background:url(images/leftcontentbg.png) repeat-y} 
  9. .inner_list ul{margin:0px;padding:0px;font-size:12px;list-style-type:none} 
  10. .inner_list ul li{padding-top:5px;line-height:180%;margin:0px auto} 
  11. .inner_list ul li a{ color:#000;text-decoration:none} 
  12. .inner_btm a{width:128px;height:22px;background:url(images/leftbt.png) left top no-repeat;display:block} 
  13. </style> 

2.引用jquery的库文件js/jquery.js

3.引用效果的具体js代码

  1. <script> 
  2. // JavaScript Document 
  3. $(document).ready(function(){ 
  4.     $(window).scroll(function(){ 
  5.         nowtop = parseInt($(document).scrollTop());  
  6.         $('#cleft_box').css('top', nowtop + 200 + 'px'
  7.     }) 
  8.     $('#cleft_box').hover(function(){ 
  9.         $(this).css('width','172px'); 
  10.     },function(){ 
  11.         $(this).css('width','36px'); 
  12.     })   
  13.     $('#toTop').click(function(){ 
  14.         $(document).scrollTop(0);    
  15.     }) 
  16. }) 
  17. </script> 

4.将id为cleft_box的div的内容复制到您的html文件

上一篇:jQuery网页特效在线QQ客服代码
下一篇:悬浮右侧可展开的在线客服代码
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门