div固定页面右下角实现

JavaSam

浏览: 957419 次
性别:
来自: 北京

最近访客更多访客>>

chyunfan

lversony

zwj1030711290

zl_dream1106

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML
javascript

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>使用CSS将Div固定在窗口的右下角</title> 
<style> 
#INDEXT_RB_AD{ 
clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid; 
bottom:5px; right:5px; 

/* 火狐、Google浏览器只需要后面这一句代码即可 */ 
position:fixed !important; 

/* 以下代码是针对IE6的 */ 
_position:absolute; 
_top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) ); 
} 
</style> 
</head> 
<body> 
<div style="height:2000px;">使用CSS将Div固定在窗口的右下角</div> 
<div id="INDEXT_RB_AD" style="display:;"> 
<div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer; " onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">关闭</div> 
<div>这里是您要显示的内容</div> 
</div> 
</body> 
</html> 

=======================================================================
如果要将该功能写入js文件里，供网站多个页面同时调用，可以使用下列代码 
=======================================================================

<script> 
//var RB_FLOAT_AD = "no"; //在不需要显示的页面加上此行代码 
if ( typeof(RB_FLOAT_AD) == "undefined" || RB_FLOAT_AD != "no" ){ 
//输出CSS样式 
document.write('<style>#INDEXT_RB_AD{ clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid; bottom:10px; right:5px; /* 火狐、Google浏览器只需要后面这一句代码即可 */ position:fixed !important; /* 以下代码是针对IE6的 */ _position:absolute; _top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) ); }</style>'); 
// 
document.write('<div id="INDEXT_RB_AD" style="display:;"><div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer;" onclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">关闭</div><div>这里是您要显示的内容</div></div>'); 
} 
</script>

分享到：

Spring XML配置十二个最佳实践 | js获取项目根路径

2012-11-02 14:21
浏览 3457
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

div固定页面右下角实现

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

div固定页面右下角实现

评论

发表评论

相关推荐

微信2.0分享自定义标题、图片、摘要、链接

详解css3使用border属性实现各种三角形及其他复杂图形的原理

js验证正则大全

javascript判断字符串是否是回文的算法实现

HTML5学习记录-----canvas学习之动画快照

HTML5学习记录-----canvas学习之鼠标选取放大图像

HTML5学习记录-----canvas学习之获取鼠标在canvas上的坐标位置

HTML5学习记录-----canvas学习之钟表

ajax.js

html5 规范中新增的api

被Arguments对象坑了。

input onpaste事件

javascript正则表达式学习——顺序肯定环视，顺序否定环视

javascript小工具之——cookie操作

javascript本地缓存之localStorage，sessionStorage等

javascript本地缓存之userData（ie专用）

javascript 排序，分组小工具 - 支持JSON数组 原生数组（学习，持续更新）

javascript 计算两日期之间的天数

web版2048小游戏 --- 学习用

javascript 将HTML转为 word，pdf 等（ie）

最近访客更多访客>>

javascript 排序，分组小工具 - 支持JSON数组原生数组（学习，持续更新）