[Javascript]右侧悬浮框

最新推荐文章于 2022-02-17 17:35:18 发布

shu010

最新推荐文章于 2022-02-17 17:35:18 发布

阅读量1k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<span style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px;">网站右侧经常需要用到悬浮框，分享一个我经常用的代码片段，兼容IE、FF、Chrome。</span>

<!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>

转载：http://blog.csdn.net/spring21st/article/details/7026185

shu010

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Javascript]右侧悬浮框

网站右侧经常需要用到悬浮框，分享一个我经常用的代码片段，兼容IE、FF、Chrome。 JS实现上下浮动代码 .go_top {z-index:1;width:29px;height:350px;position:absolute;right:20px;float:right;margin:0px;}.top { background:url(http://img4.ddi
复制链接

扫一扫