asp.net2.0下（用c#语言），侧边浮动客服，会随着滚动条滚动

可展开滚动的QQ客服代码
你可以到懒人图库上下载
http://www.lanrentuku.com/js/kefu-606.html

在网上搜个js的比较实际，这个跟c#没什么关系

这个确实跟c#没关系，js脚本就可以实现了！你去一些有这种功能的网站上把它们的js下载下来就行啦！

这个是在html页面上用js写的效果。
后台是C# 还是VB没有关系。

div滚动
<div style="width:760px;height:1500px;background-color:#f4f4f4;" align="center"></div>
<script language="JavaScript">
lastScrollY=0;
function heartBeat(){
diffY=document.body.scrollTop;
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.all.makewing.style.pixelTop+=percent;
lastScrollY=lastScrollY+percent;
}
suspendcode45="<DIV id=makewing style='POSITION:absolute;TOP:18px;'><A HREF=''><img src='' border=0></A></div>"
document.write(suspendcode45);
window.setInterval("heartBeat()",1);
</script>

[code=HTM]<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>qq float</title>
    <style type="text/css">
    body{height:2000px;}
    div{position:absolute;right:0px;top:200px;}
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    var distance=200;
    function qqfloat(){
var div = $("#float")
var scroll = $(window).scrollTop();
var dtop = parseInt(div.css("top"));
if(scroll+distance!=dtop){
    var dy = (scroll+distance-dtop)*0.1;
    dy = Math.ceil(dy);
    div.css("top",dtop+dy);
}
    }
    setInterval(qqfloat,10)
</script>
</head>
<body>
<div id="float"><img src="qq.jpg"/></div>
</body>
</html>[/code]

第一种
<!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>右侧悬浮的QQ在线客服-www.wangyeba.com</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.qqbox a:link {
        color: #000;
        text-decoration: none;
}
.qqbox a:visited {
        color: #000;
        text-decoration: none;
}
.qqbox a:hover {
        color: #f80000;
        text-decoration: underline;
}
.qqbox a:active {
        color: #f80000;
        text-decoration: underline;
}
.qqbox{
        width:132px;
        height:auto;
        overflow:hidden;
        position:absolute;
        right:0;
        top:100px;
        color:#000000;
        font-size:12px;
        letter-spacing:0px;
}
.qqlv{
        width:25px;
        height:256px;
        overflow:hidden;
        position:relative;
        float:right;
        z-index:50px;
}
.qqkf{
        width:120px;
        height:auto;
        overflow:hidden;
        right:0;
        top:0;
        z-index:99px;
        border:6px solid #138907;
        background:#fff;
}
.qqkfbt{
        width:118px;
        height:20px;
        overflow:hidden;
        background:#138907;
        line-height:20px;
        font-weight:bold;
        color:#fff;
        position:relative;
        border:1px solid #9CD052;
        cursor:pointer;
        text-align:center;
}
.qqkfhm{
        width:112px;
        height:22px;
        overflow:hidden;
        line-height:22px;
        padding-right:8px;
        position:relative;
        margin:3px 0;
}
.bgdh{
        width:102px;
        padding-left:10px;
}
</style>
</head>
<body>
<div class="qqbox" id="divQQbox">
  <div class="qqlv" id="meumid" onmouseover="show()"><img src="/teixiao/UploadFiles_4612/201101/20110126114356671.gif"></div>
  <div class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)">
    <div class="qqkfbt" onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',5,1);" id="qq-1" onfocus="this.blur();">三星装饰客服一组</div>
    <div id="K1">
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a><br/></div>
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a></div>
      <div class="qqkfhm bgdh">组长: 13922222222</div>
    </div>
    <div class="qqkfbt" onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,2);" id="qq-2" onfocus="this.blur();">三星装饰客服二组</div>
    <div id="K2" style="display:none">
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a><br/></div>
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a></div>
      <div class="qqkfhm bgdh">组长: 13955432222</div>
    </div>
    <div class="qqkfbt"  onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,3);" id="qq-3" onfocus="this.blur();">三星装饰客服三组</div>
    <div id="K3" style="display:none">
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a><br/></div>
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a></div>
      <div class="qqkfhm bgdh">组长: 13222235523</div>
    </div>
    <div class="qqkfbt"  onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,4);" id="qq-4" onfocus="this.blur();">三星装饰客服四组</div>
    <div id="K4" style="display:none">
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a><br/></div>
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a></div>
      <div class="qqkfhm bgdh">组长: 13222225523</div>
    </div>
    <div class="qqkfbt" onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,5);" id="qq-5" onfocus="this.blur();">三星装饰投诉建议</div>
    <div id="K5" style="display:none">
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a><br/></div>
      <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">三星装饰客服</a></div>
      <div class="qqkfhm bgdh">组长: 13952222523</div>
    </div>
  </div>
</div>
<script language="javascript">
function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) {
    var h_id,hon_id,hout_id,c_id,totalnumber,activeno;
    for (var i=1;i<=totalnumber;i++) {
        document.getElementById(c_id+i).style.display='none';
        document.getElementById(h_id+i).className=hout_class;
    }
    document.getElementById(c_id+activeno).style.display='block';
    document.getElementById(h_id+activeno).className=hon_class;
}
var tips;
var theTop = 100;
var old = theTop;
function initFloatTips()
{
        tips = document.getElementById('divQQbox');
        moveTips();
}
function moveTips()
{
                   var tt=50;
                  if (window.innerHeight)
                  {
                pos = window.pageYOffset
                  }else if (document.documentElement && document.documentElement.scrollTop) {
                pos = document.documentElement.scrollTop
                  }else if (document.body) {
                    pos = document.body.scrollTop;
                  }
                  //http:
                  pos=pos-tips.offsetTop+theTop;
                  pos=tips.offsetTop+pos/10;
                  if (pos < theTop){
                         pos = theTop;
                  }
                  if (pos != old) {
                         tips.style.top = pos+"px";
                         tt=10;//alert(tips.style.top);
                  }
                  old = pos;
                  setTimeout(moveTips,tt);
}
initFloatTips();
        if(typeof(HTMLElement)!="undefined")//给firefox定义contains()方法，ie下不起作用
                {
                  HTMLElement.prototype.contains=function (obj)
                  {
                          while(obj!=null&&typeof(obj.tagName)!="undefind"){//
           　　　if(obj==this) return true;
           　　　        　obj=obj.parentNode;
           　　          }
                          return false;
                  }
        }
function show()
{
        document.getElementById("meumid").style.display="none"
        document.getElementById("contentid").style.display="block"
}
        function hideMsgBox(theEvent){
          if (theEvent){
                var browser=navigator.userAgent;
                if (browser.indexOf("Firefox")>0){//Firefox
                    if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {
                                return
                        }
                }
                if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){
                if (document.getElementById('contentid').contains(event.toElement)) {
                            return;//结束函式
                    }
                }
          }
          document.getElementById("meumid").style.display = "block";
          document.getElementById("contentid").style.display = "none";
         }
</script>
</body>
</html>

本帖最后由 net_lover 于 2011-02-19 09:25:02 编辑

调试易

asp.net2.0下（用c#语言），侧边浮动客服，会随着滚动条滚动

解决方案 »