在我们要用浮动的QQ客服时,通常是固定在页面某个位置,但需要兼容的浏览器很多,可能会导致浮动的QQ客服盖住了页面内容。这个JavaScript代码可以解决这个问题,可随意拖动的浮动框到页面任意位置,且兼容IE/FF/chrome/Opera等主流浏览器。

<!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>可拖动的浮动框</title>
<script language="JavaScript" type="text/javascript">
var x,y
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return 1;if(navigator.appName.indexOf("Netscape")>=0)return 2')
function Move_obj(obj){//1
D(obj).onmousedown=function(e){drag_=true//4
with(this){style.position="absolute";demo1=offsetLeft;demo2=offsetTop;//5
if(IE()==1){x=event.clientX;y=event.clientY//6
document.onmousemove=function(e){//7
if(drag_==false)return false
with(this){style.left=demo1+event.clientX-x+"px";style.top=demo2+event.clientY-y+"px"}
}//7
}//6
if(IE()==2){x=e.pageX;y=e.pageY;//8
document.onmousemove=function(e){//9
if(drag_==false)return false
with(this){style.left=demo1+e.pageX-x+"px";style.top=demo2+e.pageY-y+"px"}
}//9
}//8
}//5
document.onmouseup=new Function("drag_=false")
}//4
}//1
</script>
</head>

<body>
<div id="box_move" style="background-color:#999999; width:80px; height:30px; padding:5px;" onmouseover="Move_obj('box_move')">
此div box放置需要移动的内容,如QQ在线客服等。
</div>
</body>
</html>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.