首页 > 代码库 > QQ在线客服:缓冲向左弹出的网页右侧边栏Qq客服代码
QQ在线客服:缓冲向左弹出的网页右侧边栏Qq客服代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>接触角测定仪 http://www.dgshengding.com</title><style>/*开发制作,Jason.Leung, QQ,147430218*/#qq_icon {width:187px; height:193px; background:url(/jscss/demoimg/201404/qq_icon.png) no-repeat; position:fixed; right:-200px; top:150px; cursor:pointer;}#cs_online {width:217px; height:324px; position:fixed; top:150px; right:-220px; background:url(/jscss/demoimg/201404/qq_bg.png) no-repeat; display:none; filter:alpha(opacity:0); opacity:0;}.qq_context {width:185px; height:244px; margin-top:73px; margin-left:24px; list-style:none; padding:0px;} .qq_context li {width:175px; height:25px; margin-left:5px; margin-top:20px; float:left;}.span_t {display:block; float:left; color:#333; line-height:25px; font-size:12px; font-family:‘Arial‘;}</style><script type="text/javascript">function myEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEvent(‘on‘+ev,fn); }else{ obj.addEventListener(ev,fn,false); };};function getbyClass(id,sClass){ var oParent = document.getElementById(id); var all = oParent.getElementsByTagName(‘*‘); var array = []; for (var i=0; i<all.length; i++){ if (all[i].className == sClass){ array.push(all[i]); }; }; return array;};function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; };};function Running(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var now=0; var bStop=true; for (var attr in json){ if(attr==‘opacity‘){ now=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ now=parseInt(getStyle(obj,attr)); }; var speed=(json[attr]-now)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(now!=json[attr])bStop=false; if(attr==‘opacity‘){ obj.style.filter=‘alpha(opacity:‘+now+speed+‘)‘; obj.style.opacity=(now+speed)/100; }else{ obj.style[attr]=speed+now+‘px‘; }; } if(bStop){ clearInterval(obj.timer); if(fnEnd)fnEnd(); } }, 30);}function Flexing(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var now=0; var bStop=true; for (var attr in json){ if(!obj.speed)obj.speed={}; if(!obj.speed[attr])obj.speed[attr]=0; now=parseInt(getStyle(obj,attr)); if(Math.abs(json[attr]-now)>1 || Math.abs(obj.speed[attr])>1){ bStop=false; obj.speed[attr]+=(json[attr]-now)/5; obj.speed[attr]*=0.85; var MaxSpeed=65; if(Math.abs(obj.speed[attr])>MaxSpeed){ obj.speed[attr]=obj.speed[attr]>0?MaxSpeed:-MaxSpeed; }; obj.style[attr]=now+obj.speed[attr]+‘px‘; }; }; if(bStop){ clearInterval(obj.timer); obj.style[attr]=json[attr]+‘px‘; if(fnEnd)fnEnd(); }; }, 30);}function setqq(obj,num){ if (obj.length!=num.length){ alert(‘\nspan的个数与QQ号码的个数不符,请设置5个QQ号码!\n\n[设置未成功!]‘); return; }else{ for (var i=0; i<num.length; i++){ obj[i].innerHTML = "<a target=‘_blank‘ href=http://www.mamicode.com/‘http://wpa.qq.com/msgrd?v=3&uin="+num[i]+"&site=qq&menu=yes‘><img border=‘0‘ src=http://www.mamicode.com/‘http://wpa.qq.com/pa?p=2:"+num[i]+":51‘ alt=‘点击咨询‘ title=‘点击咨询‘/></a>"; }; };};function settop(id,id2,top){ var obj = document.getElementById(id); var box = document.getElementById(id2); obj.style.top = box.style.top = top+‘px‘;};function dealy(id,time){ var obj = document.getElementById(id); var timer = setTimeout(function(){ Flexing(obj,{right:-100}); },time*1000);};function click_fn(id,id2){ var obj = document.getElementById(id); var box = document.getElementById(id2); obj.onclick = function(){ Running(obj,{right:-200},function(){ box.style.display = ‘block‘; Running(box,{right:10, opacity:100}); }); }; box.onclick = function(){ timer = setTimeout(function(){ Running(box,{right:-220,opacity:0},function(){ box.style.display = ‘none‘; Flexing(obj,{right:-100}); }); },3000); };};</script><div id= ‘qq_icon‘></div><div id=‘cs_online‘> <ul class=‘qq_context‘> <li> <span class=‘span_t‘>在线客服01:</span> <span class=‘qq_num‘></span> </li> <li> <span class=‘span_t‘>在线客服02:</span> <span class=‘qq_num‘></span> </li> <li> <span class=‘span_t‘>在线客服03:</span> <span class=‘qq_num‘></span> </li> <li> <span class=‘span_t‘>在线客服04:</span> <span class=‘qq_num‘></span> </li> <li> <span class=‘span_t‘>在线客服05:</span> <span class=‘qq_num‘></span> </li> </div></div><script type="text/javascript">myEvent(window,‘load‘,function(){dealy(‘qq_icon‘,2);//2秒后显示QQ图标,默认为2秒,可自行设置settop(‘qq_icon‘,‘cs_online‘,150);//设置在线客服的高度,默认150,可自行设置var span_q = getbyClass(‘cs_online‘,‘qq_num‘);setqq(span_q,[‘800020304‘,‘800020304‘,‘800020304‘,‘800020304‘,‘800020304‘]);//填写5个QQ号码click_fn(‘qq_icon‘,‘cs_online‘);});</script></div></body></html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。