请教怎么通过javascript脚本，把一个<div>层固定在屏幕右上角,多谢
日期：2014-05-16 浏览次数：20364 次
请问如何通过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 =
请问如何通过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 =
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
