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 */
时间： 2024-08-10 21:30:15