1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div style="height:1200px;"></div><div class="box_os"> <div class="os_x"></div> <div class="osqq"> <p><em>(工作日：9:30-18:30)</em></p> <p><strong>在线QQ</strong></p> <a target="_blank" href="#"><p id="ico_onlineqq" class="qq"></p></a> <p><strong>客服电话</strong><span>00000000000</span><span>00000000000</span></p> <p><strong>会员卡代理</strong><span>000000000-0000</span></p> <p><strong>微博</strong><span><a href="#" target="_blank">微博账户名</a></span></p> </div> <div class="acbox"> <a class="ico_pp" onclick="FeedbackUtil.feed('#');" href="#"></a> <a class="ico_gt" href="#" target="_self"></a> </div></div><div class="onlineService"> <p class="ico_os"></p> <a class="ico_pp" onclick="FeedbackUtil.feed('#');" href="#"></a> <a class="ico_gt" href="#" target="_self"></a></div>
4、书写css代码。* { margin: 0; padding: 0; list-style: none稆糨孝汶; }img { border: 0; }body { text-align: left; font: 12px/1.5em \5B8B\4F53, Arial, Helvetica, sans-serif; color: #333; background: #F7F7F7; }.box_os .os_x, .box_os .osqq, .ico_os, .ico_gt, .ico_pp, .osqq .qq { background: url(../images/kf.gif) no-repeat; }.box_os { height: auto; overflow: hidden; width: 131px; position: fixed; right: 0; top: 44px; _position: absolute; z-index: 9999; display: none; }.box_os .os_x { background-color: #f7f7f7; background-position: 2px 2px; width: 18px; height: 20px; float: right; display: inline; cursor: pointer; }.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; }.box_os .osqq p { height: auto; line-height: 20px; width: 129px; margin-top: 8px; }.box_os .osqq p strong { color: #666; }.box_os .osqq img { padding: 7px 0 3px 0; }.box_os .osqq p em { color: #999; display: block; }.box_os .osqq p span { color: #547816; display: block; }.box_os .osqq .qq { background-position: -140px -120px; display: block; width: 99px; height: 26px; margin: 0 auto; margin-top: 8px; cursor: pointer; }.acbox { width: 130px; overflow: hidden; }.acbox .ico_gt { background-position: -60px 0; border: 1px solid #299ec0; border-top: 0; cursor: pointer; width: 60px; height: 33px; float: right; }.acbox .ico_pp { background-position: -60px -60px; border: 1px solid #81b140; border-top: 0; cursor: pointer; width: 60px; height: 33px; float: right; margin: 0 2px; }.onlineService { background: none; display: none; width: 39px; *width:84px;height: 178px; ; position: fixed; right: 0; top: 44px; _position: absolute; }.onlineService .ico_os { background-position: -2px -20px; border: 1px solid #c7c7c7; cursor: pointer; width: 39px; height: 98px; float: right; }.onlineService .ico_gt { background-position: right 0; border: 1px solid #299ec0; cursor: pointer; width: 39px; height: 37px; float: right; clear: both; }.onlineService .ico_pp { background-position: right -60px; border: 1px solid #81b140; cursor: pointer; width: 39px; height: 37px; float: right; margin: 0 0 1px 0; clear: both; }.box_os .osqq p span a { color: #557917; }
5、书写并添加js蜣贺鱿柢代码。$(function(){ var _userAgent = window.navigator.userAgent.toLowerCase(); 足毂忍珩if(_userAgent.indexOf('android')<0 && _userAgent.indexOf('iphone')<0 && _userAgent.indexOf('ipad')<0 ) { if($.cookie("onlineSP")==null||$.cookie("onlineSP")=="0"||$.cookie("onlineSP")=="") { $('.onlineService').show(); $('.box_os').hide(); } else if($.cookie("onlineSP")=="1") { $('.onlineService').hide(); $('.box_os').show(); } } else{ $('.onlineService').show(); $('.box_os').show(); } $('.onlineService .ico_os').click(function() { $('.onlineService').hide(); $('.box_os').show(); $.cookie("onlineSP","0",{expires:1,path:"/",domain:"lanrenzhijia.com"}); }); $('.os_x').click(function() { $('.box_os').hide(); $('.onlineService').show(); $.cookie("onlineSP","1",{expires:2100000000,path:"/",domain:"lanrenzhijia.com"}); }); $boxOsFun = function(){var st=$(document).scrollTop();if (!window.XMLHttpRequest) {$('.box_os').css('top',st+44);$('.onlineService').css('top',st+44);}}; $(window).bind('scroll', $boxOsFun); $boxOsFun(); var feedback_url ='http://www.lanrenzhijia.com'; $('.acbox .ico_pp').hover(function(){ $(this).stop().animate({height:'52px'},'fast'); },function(){ $(this).stop().animate({height:'33px'},'fast'); } ); $('.acbox .ico_gt').hover(function(){ $(this).stop().animate({height:'52px'},'fast'); },function(){ $(this).stop().animate({height:'33px'},'fast'); } ); $('.onlineService .ico_pp').hover(function(){ $(this).stop().animate({width:'87px'},'fast'); },function(){ $(this).stop().animate({width:'39px'},'fast'); } ); $('.onlineService .ico_gt').hover(function(){ $(this).stop().animate({width:'97px'},'fast'); },function(){ $(this).stop().animate({width:'39px'},'fast'); } ); $('.ico_gt').click(function(){ $("html, body").animate({scrollTop:0}, 1); }) //分辨率 if ( $(window).width()<1200 || screen.width<1200) { $('.hydp950,.w_950,.sdmain,.main').css('overflow','hidden'); $('.top_bg').css({'overflow':'hidden','width':'950px','margin':'0 auto'}); $('.db_bg2').addClass('db_bg2_s'); $('.jstd_c .bg_l,.jstd_c .bg_r').css('display','none'); $('#js_play .prev').css('left','0'); $('#js_play .next').css('right','0'); $('#videoplay .prev, #videoplay2 .prev').addClass('prev_s'); $('#videoplay .next, #videoplay2 .next').addClass('next_s'); }else{ $('.hydp950,.w_950,.sdmain,.main').removeAttr('style'); $('.top_bg').removeAttr('style'); $('.db_bg2').removeClass('db_bg2_s'); $('.jstd_c .bg_l,.jstd_c .bg_r').removeAttr('style'); $('#js_play .prev').removeAttr('style'); $('#js_play .next').removeAttr('style'); $('#videoplay .prev, #videoplay2 .prev').removeClass('prev_s'); $('#videoplay .next, #videoplay2 .next').removeClass('next_s'); }});
6、代码整体结构。
7、查看效果。
