网站右侧在线客服代码

时间：2024-10-13 22:40:49

1、新建html文档。

3、书写hmtl代艨位雅剖码。<div id="online_qq_layer">稆糨孝汶; <div id="online_qq_tab"> <div class="online_icon"> <a title id="floatShow" style="display: block;" href="#"> </a> <a title id="floatHide" style="display: none;" href="#"> </a> </div> </div> <div id="onlineService"> <div class="online_windows overz"> <div class="online_w_top"> </div>  <div class="online_w_c overz"> <div class="online_bar expand" id="onlineSort1"> <h2><a>域名/虚拟主机</a></h2> <div class="online_content overz" id="onlineType1"> <ul class="overz"> <li> <a onclick="#" class="qq_icon"> 企业QQ交谈</a></li> <li>企业QQ： <a onclick="#;"> 123456</a></li> </ul> </div> </div>  <div class="online_bar collapse" id="onlineSort2"> <h2><a>企业邮局</a></h2> <div class="online_content overz" id="onlineType2"> <ul class="overz"> <li> <a onclick="#" class="qq_icon"> 企业QQ交谈</a></li> <li>企业QQ： <a onclick="#"> 123456</a></li> </ul> </div> </div>  <div class="online_bar collapse" id="onlineSort3"> <h2><a>建站之星/网店</a></h2> <div class="online_content overz" id="onlineType3"> <ul class="overz"> <li> <a onclick="#" class="qq_icon"> 企业QQ交谈</a></li> <li>企业QQ： <a onclick="#"> 123456</a></li> </ul> </div> </div> <div class="online_bar collapse" id="onlineSort4"> <h2><a>代理咨询</a></h2> <div class="online_content overz" id="onlineType4"> <ul class="overz"> <li> <a onclick="#" class="qq_icon"> 企业QQ交谈</a></li> <li>企业QQ： <a onclick="#"> 123456</a></li> </ul> </div> </div> <div class="online_bar collapse" id="onlineSort5"> <h2><a>网站推广</a></h2> <div class="online_content overz" id="onlineType5"> <ul class="overz"> <li> <a onclick="#" class="qq_icon"> 企业QQ交谈</a></li> <li>企业QQ： <a onclick="#"> 123456</a></li> </ul> </div> </div> <div class="online_bar collapse" id="onlineSort6"> <h2><a>橙云主机(IDC)</a></h2> <div class="online_content overz" id="onlineType6"> <ul class="overz"> <li> <a class="qqlink" href="#"> <img src="images/qqs_1.gif" border="0">123456</a></li> </ul> <ul class="overz"> <li> <a class="qqlink" href="#" > <img src="images/qqs_1.gif" border="0">123456</a></li> </ul> </div> </div> </div> <div class="online_w_bottom"> </div> </div> </div></div><div style="height:1500px;"></div>

5、书写并添加js代码。<script src="js/jquery-1.8.3.min.js"></script><script src="js/jquery.KinSlideshow-1.2.1.min.js"></script><script>function changeOnline(num) { if (isNaN(num) && num == "") return; for (var i = 1; i <=6 ; i++) { if (i == num) { document.getElementById("onlineSort" + i).className = "online_bar expand"; document.getElementById("onlineType" + i).style.display = "block"; } else { document.getElementById("onlineSort" + i).className = "online_bar collapse"; document.getElementById("onlineType" + i).style.display = "none"; } }}$(document).ready(function(){ $("#floatShow").bind("click",function(){ $('#onlineService').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#onlineService').show(); });$('#floatShow').attr('style','display:none');$('#floatHide').attr('style','display:block'); return false; }); $("#floatHide").bind("click",function(){ $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none'); }); $(document).bind("click",function(event){ if ($(event.target).isChildOf("#online_qq_layer") == false) { $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none'); } });jQuery.fn.isChildAndSelfOf = function(b){ return (this.closest(b).length > 0);};jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0);};});</script>

7、查看效果。

煤气灶打不着火怎么办？燃气灶打不着火怎么办？