请问如何通过javascript脚本，把一个<div>层固定在屏幕右上角,谢谢!
请问如何通过javascript脚本，把一个 <div> 层固定在屏幕右上角，在屏幕横向或纵向被拖动时， <div> 层一直停留在屏幕右上角，谢谢！
[解决办法]
<html>
<head>
<style type= "text/css ">
body {
height:100%;
}
#window, #window1 {
z-index:99;
position:absolute;
height:100px;
width:100px;
background-color:#CCCCCC;
}
#window1 {
z-index:100;
background-color:#00FF00;
}
#show {
height:2000px;
width:1px;
}
</style>
<script type= "text/javascript ">
window.onload = function () {
add(document.getElementById( "window "));
add(document.getElementById( "window1 "));
}
function add(w) {
w.oscrollLeft = document.body.scrollLeft;
w.oscrollTop = document.body.scrollTop;
w.oclientWidth = document.body.clientWidth;
w.oclientHeight = document.body.clientHeight;
w.style.left = w.oscrollLeft + document.body.clientWidth - w.offsetWidth;
w.style.top = w.oscrollTop + document.body.clientHeight - w.offsetHeight;
w.onmousedown = function () {
closemove(w);
}
move(w);
}
function closemove(o) {
if (o.offsetTop - o.oscrollTop - document.body.clientHeight < 0) {
o.style.top = o.offsetTop + 1 + "px ";
window.timeout(closemove, 10, o);
}
else {
window.status = "已经移除.. "
document.body.removeChild(o);
}
}
function move (o) {
if (document.getElementById(o.id)) {
var left = document.body.scrollLeft - o.oscrollLeft;
var top = document.body.scrollTop - o.oscrollTop;
/**//*
滑动特效，暂时无做。。。
var leftFH = left / Math.abs(left);
var topFH = top / Math.abs(top);
*/
o.style.left = o.offsetLeft + left;
+ document.body.clientWidth - o.oclientWidth + "px ";
o.style.top = o.offsetTop + top;
+ document.body.clientHeight - o.oclientHeight + "px ";
o.oscrollLeft = document.body.scrollLeft;
o.oscrollTop = document.body.scrollTop;
o.oclientWidth = document.body.clientWidth;
o.oclientHeight = document.body.clientHeight;
window.status = o.style.top;
window.timeout(move, 50, o);
}
}
(function () {
window.timeout = function (a, b) {
var fun = a;
if ( "function " == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun = function () {
a.apply(null, arg);
}
}
window.setTimeout(fun, b);
}
})();
</script>
</head>
<body>
<div id= "window "> </div>
<div id= "window1 "> </div>
<div id= "show "> </div>
</body>
</html>
这个是右下角的，你稍微该写就行
[解决办法]
给你改了个简单的：
<html>
<head>
<style type= "text/css ">
body {
height:100%;
}
#window, #window1 {
z-index:99;
position:absolute;
height:100px;
width:100px;
background-color:#CCCCCC;
}
#show {
height:2000px;
width:1px;
}
</style>
<script type= "text/javascript ">
window.onload=init;
function init(){
add(document.getElementById( "window "))
}
function add(obj){
obj.style.left = document.body.scrollLeft + document.body.clientWidth - obj.offsetWidth;
obj.style.top = 0;
}
window.onscroll=aaa;
function aaa(){
obj=document.getElementById( "window ")
obj1=document.getElementById( "window1 ")
obj.style.left = document.body.scrollLeft + document.body.clientWidth - obj.offsetWidth;
obj.style.top = document.body.scrollTop ;
}
</script>
</head>
<body>
<div id= "window "> </div>
<div id= "show "> </div>
</body>
</html>
[解决办法]
今天剛好從書上看到這個.
<html>
<head> <title> OnScroll Example </title>
<script>
window.onscroll=function(){
var oTextbox=document.getElementById( "divWatermark ");
//document.body.scrollLeft,它保持窗口在水平方向上卷動的距離
//document.body.scrollTop,它保持窗口在垂直方向上的距離.
oTextbox.style.top=document.body.scrollTop;
}
</script>
</head>
<body>
<div id= "divWatermark " style= "position:absolute;top:0px;right:0px;color:#cccccc;width:150px;height:30px;background-color:navy "> Watermark </div>
<p> Try scrolling this window. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
[解决办法]
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<style>
#glideDiv0
{
position: fixed; /*for firefox*/
top: 50;
left:0;
z-index:200;
width:28px;
background-color:#E6EEE7;
}
/*for ie*/
* html #glideDiv0 {position:absolute}
* html body {
overflow: hidden;
padding :0;
margin:0;
}
* html div#wrap_outer {
width: 100%;
height: 100%;
overflow: auto;
padding: 0px 30px 30px 30px;
}
</style>
</head>
<body>
<div id= "wrap_outer ">
<div style= "font-size:10pt; ">
注1：固定Div,且scroll时Div不闪动。 <br/>
注2：部分代码来自：http://www.javalobby.org/forums/thread.jspa?threadID=16484&tstart=0 <br/>
注3：（注：这里有 <a href= "DivFixedInBody1.htm "> scroll时Div闪动 </a> 的代码） <br/>
<br/>
注：本页面仅在IE6下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About Body "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<!-- layers that slide go here.
Be sure to include id for each layer in style sheet in head -->
<br/> <br/> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<br/> <br/> aaaa
<!-- end wrap_outer div--> </div>
<div id= "glideDiv0 " >
a <br>
b <br>
c <br>
d <br>
e <br>
f <br>
g <br>
<br>
</div>
</body>
</html>
