jquery 自动收缩浮动在线客服代码,QQ客服、在线MSN、旺旺,兼容IE、 FF、Google Chrome

顺子 2012-02-17 05:48:24
<!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">
<html>
<head>
<title></title>
<meta name="Keywords" content="" />
<meta name="title" content="" />
<meta name="description" content=" STATION DISTRIBUTION 沸点旗下网站!"/>
<meta name="author" content="顺子网络 www.0798wz.com" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery1.3.2.js"></script>
<body>
<div id="wrap">
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
 <br/> <br/>
</div>
<div class='QQbox' id='divQQbox' >
<div class='Qlist' id='divOnline' style='display : none;'>
<div class='t'></div>
<div class='infobox'>我们营业的时间<br>9:30-18:00</div>
<div class='con'>
<ul>
<li class=odd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=57893457&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:57893457:41" alt="Stationdist客服" title="Stationdist客服">沸点Fmaily</a></li>
<li class=odd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=57893457&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:57893457:41" alt="Boiling/恒康" title="Boiling/恒康">Boiling/恒康</a></li>
<li class=odd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=57893457&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:57893457:41" alt="进口滑板" title="进口滑板">进口滑板</a></li>
<li class=odd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=57893457&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:57893457:41" alt="Ipath/Globe" title="Ipath/Globe">Ipath/Globe</a></li>
<li>咨询电话:010-88888888</li>
<li style="text-align:center" id="closeli"><a href="javascript:;" onclick='hideMsgBox(event);'>关闭客服</a></li>
</ul>
</div>
<div class='b'></div>
</div>
<div id='divMenu' onmouseover='OnlineOver();'><img src='images/qq_1.gif' class='press' alt='在线咨询'></div>
</div>
</body>
</html>
<script type="text/javascript">
$().ready(function(){

  var browser=navigator.userAgent; //取得浏览器属性

///这里主要是为了google浏览器很难点中客服 因此我为他多加一个在线关闭,而其他浏览器会自己关闭

  if (browser.indexOf("Chrome")>0){ //如果是google
$("#closeli").show();
}
else
{
$("#divOnline").bind('mouseout',function(event) {hideMsgBox(event)});
$("#closeli").hide();
}
$(window).scroll(function() {
window.setTimeout(function(){
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}

$("#divQQbox").css("top", 100 + bodyTop)
//$("#divQQbox").text(bodyTop);
},300)
})
});
function OnlineOver(){


document.getElementById("divMenu").style.display = "none";


document.getElementById("divOnline").style.display = "block";


document.getElementById("divQQbox").style.width = "170px";


}






function OnlineOut(){


document.getElementById("divMenu").style.display = "block";


document.getElementById("divOnline").style.display = "none";






}


function hideMsgBox(theEvent){ //theEvent用来传入事件,Firefox的方式


  if (theEvent){


  var browser=navigator.userAgent; //取得浏览器属性



  if (browser.indexOf("Firefox")>0){ //如果是Firefox


   if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素


   return; //结束函式


}


}
if (browser.indexOf("MSIE")>0){ //如果是IE

if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素

return; //结束函式

}

}


}
/*要执行的操作*/
document.getElementById("divMenu").style.display = "block";
document.getElementById("divOnline").style.display = "none";
}


</script>


文件下载

更多内容。。
...全文
1667 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
顺子 2012-02-20
  • 打赏
  • 举报
回复
修改一下js
<script type="text/javascript">
$().ready(function(){

  var browser=navigator.userAgent; //取得浏览器属性
  if (browser.indexOf("Chrome")>0){ //如果是google
$("#closeli").show();
}
else
{
$("#divOnline").bind('mouseout',function(event) {hideMsgBox(event)});
$("#closeli").hide();
}
$(window).scroll(function() {
window.setTimeout(function(){
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}

$("#divQQbox").css("top", 100 + bodyTop)
//$("#divQQbox").text(bodyTop);
},300)
})
});
function OnlineOver(){

$("#divMenu").hide();
$("#divOnline").show();
$("#divQQbox").css('width','170px');

}



function OnlineOut(){

$("#divMenu").show();
$("#divOnline").hide();
}

function hideMsgBox(theEvent){ //theEvent用来传入事件,Firefox的方式

  if (theEvent){

  var browser=navigator.userAgent; //取得浏览器属性


  if (browser.indexOf("Firefox")>0){ //如果是Firefox

   if ($("#divOnline").contains(theEvent.relatedTarget)) { //如果是子元素

   return; //结束函式

}

}
if (browser.indexOf("MSIE")>0){ //如果是IE

if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素

return; //结束函式

}

}

}

/*要执行的操作*/
$("#divMenu").show();
$("#divOnline").hide();
}

</script>
Linux-Torvalds 2012-02-17
  • 打赏
  • 举报
回复
jQuery,怎么还是出现那么多的document.getElementById这种操作?
  • 打赏
  • 举报
回复
尤其中间<div id="wrap">里的内容,你知道有多傻吗?? 别光学JQ那点,CSS也看一眼吧。
  • 打赏
  • 举报
回复
这代码格式太糟糕了点吧。

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧