原生JavaScript开发的右侧客服栏

浏览数：61 / 时间：2015年06月09日

html：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页右侧QQ悬浮滚动在线客服</title>
<link rel="stylesheet" href="style/cs_q.css" type="text/css"/>
<script type="text/javascript" src="js/cs_q.js"></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 style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

css：

/*开发制作，Jason.Leung, QQ,147430218, 该插件仅供学习参考使用。*/
#qq_icon {width:187px; height:193px; background:url(../images/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(../images/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‘;}

JavaScript：

//开发制作，Jason.Leung, QQ,147430218, 该插件仅供学习参考使用。
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://wpa.qq.com/msgrd?v=3&uin="+num[i]+"&site=qq&menu=yes‘><img border=‘0‘ src=‘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);
    };
};