ASP.NET 在线QQ浮动咨询代码

以下代码存为一个用户控件ascx文件,在你要引用的地方引用就行了:
<%@ Control Language="C#" AutoEventWireup="true"  %>

<!--浮动QQ客服代码开始 -->
<link href="../Css/qq.css" rel="stylesheet" type="text/css" />
<div class="kfoutbox" id="kfoutbox" style="top: 401px;">
    <div class="kfbox" id="kfinbox">
        <div class="kf54kefuqqtop">
            <img src="../Images/kefu_up.gif" alt="关闭"><div class="kfboxclose" id="kfboxclose">
                     </div>
        </div>
        <div class="kf54kefuqqbg">
                    <div class="kefu54kefunetli">
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号1&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号1:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
                    </div>
                    <div class="kefu54kefunetli">
                        <a target="_blank" href=" http://wpa.qq.com/msgrd?v=3&uin=你的QQ号2&site=qq&menu=yes"> <img border="0" src=" http://wpa.qq.com/pa?p=2:你的QQ号2:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
                    </div>
            <div style="clear: both;">
            </div>
        </div>
        <div class="kf54kefuqqbottom">
            <a href="../contact.aspx">
                <img src="../Images/kefu_down.gif"></a></div>
            </div>
    <div class="kfboxmenu kfboxmenuright" id="kfboxmenu">
    </div>
    <div style="clear: both;">
    </div>
</div>
<div style="clear: both;">
</div>

<script type="text/javascript">
var online=new Array();
online[0]=0;online[1]=0;online[2]=0;
var default_top_ps = 350;//顶部
var evans_agt = navigator.userAgent.toLowerCase();
var evans_ie = ((evans_agt.indexOf("msie") != -1) && (evans_agt.indexOf("opera") == -1) && (evans_agt.indexOf("omniweb") == -1));
var evans_mymovey = new Number();
function evans_IeTrueBody() {
	return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body
}
function evans_GetScrollTop() {
	return evans_ie ? evans_IeTrueBody().scrollTop: window.pageYOffset
}
function evans_heartBeat() {
	evans_diffY = evans_GetScrollTop();
	evans_mymovey += Math.floor((evans_diffY - document.getElementById('kfoutbox').style.top.replace("px", "") + default_top_ps) * 0.1);
	document.getElementById('kfoutbox').style.top = evans_mymovey + "px"
}
var evans_tmpintval = window.setInterval("evans_heartBeat()", 1);
if (document.getElementById('kfboxclose')) {
	document.getElementById('kfboxclose').onclick = function() {
		window.clearInterval(evans_tmpintval);
		document.getElementById('kfoutbox').style.display = 'none'
	}
}
</script>

<!--浮动QQ客服代码结束 -->

相关的CSS文件:

@charset "utf-8";
.kfoutbox{position: absolute; z-index:10000;margin: 0px;}
.kfoutbox .kfboxmenu{width:29px; height:180px; background:url(../images/r.gif) no-repeat;margin: 0px;}
.kfoutbox .kfboxmenuleft{background:url(../images/l.gif) no-repeat;margin: 0px;}

.kfoutbox .kfbox{height:auto; width:110px; overflow:hidden; font-size:12px; text-align:center; font-family:"宋体",Verdana, Geneva, sans-serif;margin: 0px;}
.kfoutbox .kfbox a{text-decoration:none; color:#666666;}
.kfoutbox .kfbox img{border:none;}
.kfoutbox .kfbox .kf54kefuqqtop{width:110px; margin: 0px; padding: 0px;}
.kfoutbox .kfbox .kf54kefuqqtop img{
	margin: 0px;
	padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqtop .kfboxclose{
width:30px; height:40px; position:absolute; top:0px; right:0px; cursor:pointer; overflow: hidden;text-align:right;
}
.kfoutbox .kfbox .kf54kefuqqinfo{
	background:url(../Images/kefu_middle.gif) repeat-y;
	height:25px;
	line-height:25px;
	font-weight:700;
	padding-right: 8px;
	padding-left: 8px;
	margin: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg{
	background:url(../Images/kefu_middle.gif) repeat-y;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 0px;
}
.kfoutbox .kfbox .who{clear:both; text-align:right; font-size:9px; padding-right:10px; margin-top:5px;}
.kfoutbox .kfbox .kf54kefuqqbottom{
	margin: 0px;
	padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli
{
	padding: 5px 5px 0px 17px;
	list-style-type: none;
	margin: 0px;
	float: left;
	font-family: "宋体";
	font-size: 12px;
	width: 110px;
	text-align: left;
	line-height: 22px;
	background: url(../Images/kefu_middle.gif) repeat-y;
	height: 30px;
	margin-top: 15px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli p{
	margin: 0px;
	padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetgroup{
	list-style-type:none;
	margin: 0px;
	float: left;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	font-family: "宋体";
	font-size: 12px;
	width: 110px;
	text-align: left;
	line-height: 22px;
	background:url(../Images/kefu_middle.gif) repeat-y;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetgroup p{
	margin: 0px;
	padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli .kefu54kefunetpicimg {
	text-indent: 4px;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 30px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli .kefu54kefunettxt {
	text-indent: 4px;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 70px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli .kefu54kefunetpicimgcenter {
	float: left;
	text-align: center;
	width: 100px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 4px;
	margin-left: 0px;
}

 .kfoutbox
    {
        left: 15px;  /*控制左右*/
        /*kf54kefuqqtop: 50px;*/
    }
    .kfboxmenu
    {
        display: none;
    }

图片我就不上传了, 自己去网上找找吧。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值