<script type="text/javascript"> //以下所有脚本只为IE6写,其他浏览器完全可以删除。 function getViewportScrollX() { var scrollX = 0; if (document.documentElement && document.documentElement.scrollLeft) { scrollX = document.documentElement.scrollLeft; } else if (document.body && document.body.scrollLeft) { scrollX = document.body.scrollLeft; } else if (window.pageXOffset) { scrollX = window.pageXOffset; } else if (window.scrollX) { scrollX = window.scrollX; } return scrollX; }
function getViewportScrollY() { var scrollY = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollY = document.documentElement.scrollTop; } else if (document.body && document.body.scrollTop) { scrollY = document.body.scrollTop; } else if (window.pageYOffset) { scrollY = window.pageYOffset; } else if (window.scrollY) { scrollY = window.scrollY; } return scrollY; }
function getViewportWidth() { var width = 0; if (document.documentElement && document.documentElement.clientWidth) { width = document.documentElement.clientWidth; } else if (document.body && document.body.clientWidth) { width = document.body.clientWidth; } else if (window.innerWidth) { width = window.innerWidth - 18; } return width; }
function getViewportHeight() { var height = 0; if (window.innerHeight) { height = window.innerHeight - 18; } else if (document.documentElement && document.documentElement.clientHeight) { height = document.documentElement.clientHeight; } else if (document.body && document.body.clientHeight) { height = document.body.clientHeight; } return height; }
if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) { window.ononload = window.onscroll = window.onresize = function (e) { var t = getViewportScrollY(); var l = getViewportScrollX(); var w = getViewportWidth(); var h = getViewportHeight(); document.getElementById("y1").style.left = l + "px"; document.getElementById("y1").style.top = t + "px";
document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px"; document.getElementById("y2").style.top = t + "px";
document.getElementById("y3").style.left = l + "px"; document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px"; document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px"; } } </script> </head> <body> <div id="y1">左上角位置的内容</div> <div id="y2">右上角位置的内容</div> <div id="y3">左下角位置的内容</div> <div id="y4">右下角位置的内容</div> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> </body> </html>
<!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>
<style type="text/css">
html,body{margin:0;padding:0;}
#y1 {position:fixed;top:0;left:0;width:100px;height:100px;border:1px solid red;}
#y2 {position:fixed;top:0;right:0;width:100px;height:100px;border:1px solid red;}
#y3 {position:fixed;bottom:0;left:0;width:100px;height:100px;border:1px solid red;}
#y4 {position:fixed;bottom:0;right:0;width:100px;height:100px;border:1px solid red;}
</style>
<!--[if lte IE 6]>
<style>
#y1 {position:absolute;}
#y2 {position:absolute;}
#y3 {position:absolute;}
#y4 {position:absolute;}
</style>
<![endif]-->
<script type="text/javascript">
//以下所有脚本只为IE6写,其他浏览器完全可以删除。
function getViewportScrollX() {
var scrollX = 0;
if (document.documentElement && document.documentElement.scrollLeft) {
scrollX = document.documentElement.scrollLeft;
}
else if (document.body && document.body.scrollLeft) {
scrollX = document.body.scrollLeft;
}
else if (window.pageXOffset) {
scrollX = window.pageXOffset;
}
else if (window.scrollX) {
scrollX = window.scrollX;
}
return scrollX;
}
function getViewportScrollY() {
var scrollY = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollY = document.documentElement.scrollTop;
}
else if (document.body && document.body.scrollTop) {
scrollY = document.body.scrollTop;
}
else if (window.pageYOffset) {
scrollY = window.pageYOffset;
}
else if (window.scrollY) {
scrollY = window.scrollY;
}
return scrollY;
}
function getViewportWidth() {
var width = 0;
if (document.documentElement && document.documentElement.clientWidth) {
width = document.documentElement.clientWidth;
}
else if (document.body && document.body.clientWidth) {
width = document.body.clientWidth;
}
else if (window.innerWidth) {
width = window.innerWidth - 18;
}
return width;
}
function getViewportHeight() {
var height = 0;
if (window.innerHeight) {
height = window.innerHeight - 18;
}
else if (document.documentElement && document.documentElement.clientHeight) {
height = document.documentElement.clientHeight;
}
else if (document.body && document.body.clientHeight) {
height = document.body.clientHeight;
}
return height;
}
if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) {
window.ononload = window.onscroll = window.onresize = function (e) {
var t = getViewportScrollY();
var l = getViewportScrollX();
var w = getViewportWidth();
var h = getViewportHeight();
document.getElementById("y1").style.left = l + "px";
document.getElementById("y1").style.top = t + "px";
document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
document.getElementById("y2").style.top = t + "px";
document.getElementById("y3").style.left = l + "px";
document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
}
}
</script>
</head>
<body>
<div id="y1">左上角位置的内容</div>
<div id="y2">右上角位置的内容</div>
<div id="y3">左下角位置的内容</div>
<div id="y4">右下角位置的内容</div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript"> //解决ie6.0 的bug
function handingIE6() {
if ($.browser.msie && $.browser.version == "6.0") {
$("#flowDiv").css({ "position": "absolute", "right": "10px", "z-index": 100 });
//底部显示
var divBottom = $(window).scrollTop() + $(window).height() - $("#flowDiv").outerHeight(true) - 10;
$("#flowDiv").animate({ top: divBottom }, { duration: 400, queue: false });
}
} $(function () {
//关闭按钮??
$("#btnClose").click(function () {
$("#flowDiv").fadeOut("fast");
}); //左侧点击显示??
$("#showFlow").click(function () {
$("#flowDiv").slideDown("slow");
}); //IE6.0 执行D代码?
if ($.browser.msie && $.browser.version == "6.0") {
handingIE6(); } else {
$("#flowDiv").css({ "position": "fixed", "right": "10px", "bottom": "10px", "z-index": 100 });
}
//显示浮动层?
//$("#flowDiv").slideDown("slow");
$("#flowDiv").show();
//ie6.0 运行D
$(window).scroll(function () { handingIE6(); }).resize(function () { handingIE6(); });
})
</script>
<style type="text/css">
#flowDiv{ width:250px; overflow:hidden; border:solid 1px green; font-size:13px; display:none;}
#flowTitle{padding:3px 5px; height:20px; line-height:20px; background:#FFDD55; border-bottom:solid 1px green; }
#flowContent{height:100px; padding:5px; background:#E0F7FF;}
</style>
</head>
<body>
<div id="flowDiv">
<div id="flowTitle"><span style="float:left">标题a</span><span id="btnClose" style="float:right; cursor:pointer"> x?? </span></div>
<div id="flowContent">内容Y</div>
</div><p id="showFlow" style="height:1500px; padding:10px; width:17px; cursor:pointer; background:#99AFC4; te">点击显示弹出层?</p>
</body>
</html>