[Javascript]右侧悬浮框

来源：互联网发布：淘宝小号批量死的原因编辑：程序博客网时间：2024/04/28 14:46

<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

0 0