网站右侧经常需要用到悬浮框,分享一个我经常用的代码片段,兼容IE、FF、Chrome。
<!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>JS实现上下浮动代码</title>
<style type="text/css">
.go_top {z-index:1;width:29px;height:350px;position:absolute;right:20px;float:right;margin:0px;}
.top { background:url(http://img4.ddimg.cn/00016/basic/bg_float_top.gif) left top no-repeat; padding:21px 0 0; width:25px; }
.top a { text-decoration:none; }
.top a,
.top a:hover { /*background:url(http://img4.ddimg.cn/00016/basic/bg_float_bt.gif) left bottom no-repeat;*/ color:#656a77; text-align:left; display:block; padding-left:6px; padding-bottom:10px; font-size:12px; border:0 1px 1px 1px;
border-color: #EFEFEF;
border-style: solid;
border-width: 0 2px 2px;}
.top a:hover { color:#ff6600; }
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
var w3c = (document.getElementById) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var mymovey = new Number();
function IeTrueBody(){
return (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
}
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
function heartBeat(){
diffY=GetScrollTop();
mymovey += Math.floor((diffY-document.getElementById('backi').style.top.replace("px","")+50)*0.1);
document.getElementById('backi').style.top = mymovey+"px"; }
window.setInterval("heartBeat()",1);
</script>
<div style="height:1500px;width:1000px;background:#FFFFFF;"></div>
<div id="backi" class="go_top">
<p class="top"><a target="_blank" href="http://static.dangdang.com/topic/744/200778.shtml">手机下单满29元送10元话费</a></p>
</div>
</body>
</html>