在网页里添加客服
浏览数：32 /
时间：2015年06月09日
html文件的<body>添加
1 <!--qq客服--> 2 <div class="box_os"> 3 <div class="os_x" style=""></div> 4 <div class="osqq"> 5 <p><em>(工作日：9:30-18:30)</em></p> 6 <!-- 7 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2692594761&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2692594761:51" alt="欢迎欢迎热烈欢迎" title="欢迎欢迎热烈欢迎"/></a> 8 --> 9 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2692594761&site=qq&menu=yes"><p id="ico_onlineqq" class="qq"></p></a> 10 <p><strong>微博</strong><span><a href="http://weibo.com/" target="_blank">微博账户名</a></span></p> 11 12 </div> 13 <div class="acbox"> 14 <a class="ico_pp" href="javascript:void(0);" title=""></a> 15 <a class="ico_gt" href="javascript:" target="_self" title=""></a> 16 <div style="display: none;" ><img src="static/images/two-dimension.jpg" style="width:120px;height:120px"></div> 17 </div> 18 </div> 19 <div class="onlineService"> 20 <p class="ico_os"></p> 21 <a class="ico_pp" href="#" title=""></a> 22 <div style="display: none;margin-left:-120px;margin-top:-12px;" ><img src="static/images/two-dimension.jpg" style="width:120px;height:120px"></div> 23 <a class="ico_gt" href="javascript:" target="_self" title=""></a> 24 25 </div>
<head>添加
1 <!--在线客服的css--> 2 <script src="js/service.js" type="text/javascript"></script> 3 <link href="static/css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
service.js文件
1 $(function(){ 2 3 var _userAgent = window.navigator.userAgent.toLowerCase(); 4 if(_userAgent.indexOf(‘android‘)<0 && _userAgent.indexOf(‘iphone‘)<0 && _userAgent.indexOf(‘ipad‘)<0 ) 5 { 6 7 if($.cookie("onlineSP")==null||$.cookie("onlineSP")=="0"||$.cookie("onlineSP")=="") 8 { 9 $(‘.onlineService‘).show(); 10 $(‘.box_os‘).hide(); 11 } 12 else if($.cookie("onlineSP")=="1") 13 { 14 $(‘.onlineService‘).hide(); 15 $(‘.box_os‘).show(); 16 } 17 18 } 19 else{ 20 $(‘.onlineService‘).show(); 21 $(‘.box_os‘).show(); 22 23 } 24 25 $(‘.onlineService .ico_os‘).click(function() 26 { 27 $(‘.onlineService‘).hide(); 28 $(‘.box_os‘).show(); 29 $.cookie("onlineSP","0",{expires:1,path:"/",domain:"lanrenzhijia.com"}); 30 }); 31 $(‘.os_x‘).click(function() 32 { 33 $(‘.box_os‘).hide(); 34 $(‘.onlineService‘).show(); 35 $.cookie("onlineSP","1",{expires:2100000000,path:"/",domain:"lanrenzhijia.com"}); 36 }); 37 $boxOsFun = function(){var st=$(document).scrollTop();if (!window.XMLHttpRequest) {$(‘.box_os‘).css(‘top‘,st+44);$(‘.onlineService‘).css(‘top‘,st+44);}}; 38 $(window).bind(‘scroll‘, $boxOsFun); 39 $boxOsFun(); 40 41 var feedback_url =‘http://www.lanrenzhijia.com‘; 42 43 $(‘.acbox .ico_pp‘).hover(function(){ 44 $(this).stop().animate({height:‘52px‘},‘fast‘); 45 },function(){ 46 $(this).stop().animate({height:‘33px‘},‘fast‘); 47 } 48 ); 49 $(‘.acbox .ico_gt‘).hover(function(){ 50 $(this).stop().animate({height:‘52px‘},‘fast‘); 51 },function(){ 52 $(this).stop().animate({height:‘33px‘},‘fast‘); 53 } 54 ); 55 56 $(‘.onlineService .ico_pp‘).hover(function(){ 57 $(this).stop().animate({width:‘87px‘},‘fast‘); 58 },function(){ 59 $(this).stop().animate({width:‘39px‘},‘fast‘); 60 } 61 ); 62 $(‘.onlineService .ico_gt‘).hover(function(){ 63 $(this).stop().animate({width:‘97px‘},‘fast‘); 64 },function(){ 65 $(this).stop().animate({width:‘39px‘},‘fast‘); 66 } 67 ); 68 69 $(‘.ico_gt‘).click(function(){ 70 $("html, body").animate({scrollTop:0}, 1); 71 }) 72 73 74 //分辨率 75 if ( $(window).width()<1200 || screen.width<1200) 76 { 77 $(‘.hydp950,.w_950,.sdmain,.main‘).css(‘overflow‘,‘hidden‘); 78 $(‘.top_bg‘).css({‘overflow‘:‘hidden‘,‘width‘:‘950px‘,‘margin‘:‘0 auto‘}); 79 $(‘.db_bg2‘).addClass(‘db_bg2_s‘); 80 $(‘.jstd_c .bg_l,.jstd_c .bg_r‘).css(‘display‘,‘none‘); 81 $(‘#js_play .prev‘).css(‘left‘,‘0‘); 82 $(‘#js_play .next‘).css(‘right‘,‘0‘); 83 $(‘#videoplay .prev, #videoplay2 .prev‘).addClass(‘prev_s‘); 84 $(‘#videoplay .next, #videoplay2 .next‘).addClass(‘next_s‘); 85 }else{ 86 $(‘.hydp950,.w_950,.sdmain,.main‘).removeAttr(‘style‘); 87 $(‘.top_bg‘).removeAttr(‘style‘); 88 $(‘.db_bg2‘).removeClass(‘db_bg2_s‘); 89 $(‘.jstd_c .bg_l,.jstd_c .bg_r‘).removeAttr(‘style‘); 90 $(‘#js_play .prev‘).removeAttr(‘style‘); 91 $(‘#js_play .next‘).removeAttr(‘style‘); 92 $(‘#videoplay .prev, #videoplay2 .prev‘).removeClass(‘prev_s‘); 93 $(‘#videoplay .next, #videoplay2 .next‘).removeClass(‘next_s‘); 94 } 95 $(".ico_pp").hover(function(){ 96 $(".ico_pp").siblings("div").fadeIn(0); 97 },function(){ 98 $(".ico_pp").siblings("div").fadeOut(0); 99 }); 100 101 });
lanrenzhijia.css文件
1 @charset "utf-8"; 2 /* 代码整理：懒人之家 www.lanrenzhijia.com */ 3 *{ margin:0; padding:0; list-style:none;} 4 img{ border:0;} 5 6 7 /*-- 本例样式 --*/ 8 .box_os .os_x, .box_os .osqq, .ico_os, .ico_gt, .ico_pp, .osqq .qq{ background:url(../images/kf.png) no-repeat;} 9 .box_os{ height:auto; overflow:hidden; width:131px; position:fixed; right:0; top:44px; _position:absolute; z-index:9999;display:none;} 10 .box_os .os_x{ background-color:#f7f7f7; background-position:2px 2px; width:18px; height:20px; float:right; display:inline; cursor:pointer; margin-top: 30px;} 11 .box_os .osqq{ width:129px; border:1px solid #D1D1D1; background-color:#fff; background-position:0 -120px; clear:both; padding:37px 0 8px 0; text-align:center;} 12 .box_os .osqq p{ height:auto; line-height:20px;width:129px; margin-top:8px;} 13 .box_os .osqq p strong{ color:#666;} 14 .box_os .osqq img{ padding:7px 0 3px 0;} 15 .box_os .osqq p em{ color:#999; display:block;} 16 .box_os .osqq p span{ color:#547816; display:block;} 17 .box_os .osqq .qq{ background-position:-140px -120px; display:block; width:99px; height:26px; margin:0 auto; margin-top:8px; cursor:pointer;} 18 .acbox{ width:130px; overflow:hidden;} 19 .acbox .ico_gt{ background-position:-60px 0; border:1px solid #299ec0; border-top:0; cursor:pointer; width:60px; height:33px; float:right;} 20 .acbox .ico_pp{ background-position:-60px -60px;border-top:0; cursor:pointer; width:60px; height:33px; float:right; margin:0 2px;} 21 .onlineService{ background:none; display:none; width:39px; *width:84px; height:178px; ;position:fixed; right:0; top:84px; _position:absolute;} 22 .onlineService .ico_os{ background-position:-2px -20px; border:1px solid #c7c7c7; cursor:pointer; width:39px; height:98px; float:right;} 23 .onlineService .ico_gt{ background-position:right 0; border:1px solid #299ec0; cursor:pointer; width:39px; height:37px; float:right; clear:both;} 24 .onlineService .ico_pp{ background-position:right -60px; cursor:pointer; width:40px; height:37px; float:right; margin:0 0 1px 0; clear:both;} 25 .box_os .osqq p span a{color:#557917;} 26 /* 代码整理：懒人之家 www.lanrenzhijia.com */
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
