首页 > 代码库 > 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>