社区
JavaScript
帖子详情
请问如何通过javascript脚本,把一个
层固定在屏幕右上角,谢谢!
suguanqun
2007-09-18 04:48:35
请问如何通过javascript脚本,把一个<div>层固定在屏幕右上角,在屏幕横向或纵向被拖动时,<div>层一直停留在屏幕右上角,谢谢!
...全文
1279
13
打赏
收藏
请问如何通过javascript脚本,把一个<div>层固定在屏幕右上角,谢谢!
请问如何通过javascript脚本,把一个层固定在屏幕右上角,在屏幕横向或纵向被拖动时,层一直停留在屏幕右上角,谢谢!
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
13 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
yesxd
2007-09-19
打赏
举报
回复
边缘网络致力于web技术的研究,欢迎大家加入
QQ群23133419
for_cyan
2007-09-19
打赏
举报
回复
yeah
用onscoll事件处理
btbtd
2007-09-19
打赏
举报
回复
.OPERA 禁止引用, 放到地址栏, 按转到...
btbtd
2007-09-19
打赏
举报
回复
http://files.myopera.com/btbtd/javascript/class/FixBox/FixBox(xRight-yTop).htm
suguanqun
2007-09-19
打赏
举报
回复
问题解决了:
做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,
window.onscroll=function () {
var oFix=document.getElementById("divfix");
oFix.style.top=document.body.scrollTop+"px";
}
可是怎么没有达到预期效果呢,输出document.body.scrollTop的值一看,一直都是0.原来是DTD的问题,要是页面直接用<html>开头的话就没有问题了.但是要符合web标准,DTD当然是不能少的.使用DTD时用document.documentElement.scrollTop代替document.body.scrollTop就可以了
window.onscroll=function () {
var oFix=document.getElementById("divfix");
oFix.style.top=document.documentElement.scrollTop+"px";
}
原引:http://hi.baidu.com/xletian/blog/item/147d861344b927d2f6039e56.html
suguanqun
2007-09-19
打赏
举报
回复
问题找到了,是DTD对javascript有影响,具体解决办法还在研究中.
suguanqun
2007-09-19
打赏
举报
回复
感谢大家的回复,很抱歉,我的这个功能要在aspx页面下实现.所以上述几个例子在html页面可以实现,但是在aspx页面无法实现.
aspx页面代码头上有如下描述:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
JK_10000
2007-09-19
打赏
举报
回复
<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>
suguanqun
2007-09-19
打赏
举报
回复
谢谢楼上两位的回复!
为什么在"XHTML 1.0"下无法执行!
xuantian868
2007-09-18
打赏
举报
回复
今天剛好從書上看到這個.
<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>
xiaolei1982
2007-09-18
打赏
举报
回复
给你改了个简单的:
<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>
cancer2000
2007-09-18
打赏
举报
回复
学习ing...
xiaolei1982
2007-09-18
打赏
举报
回复
<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>
这个是右下角的,你稍微该写就行
js实现页面加载完毕之前loading提示效果
js实现页面加载完毕之前loading提示效果:在页面上所有的DOM没有加载完毕之前,我们想让页面正中间显示
一个
“页面加载中,请稍后...”的字样,此效果正是,样式可以根据自己的需求改动!!!
【前端面试专栏】<script>
脚本
以及 <link> 标签对 DOM 解析渲染的影响
当HTML解析器解析HTML,如果遇到`script`标签,普通的`script`标签会暂停对DOM解析渲染,因为该
脚本
可能会修改DOM。这里有三种情况:普通脚步、defer、async。
<script>标签书写位置
今天在使用标签时,发现了
一个
问题,同样的代码在
XSS网站攻击演示
XSS攻击通常是指,攻击者向
一个
站点注入恶意代码(通常为
JavaScript
),以攻击该站点的其它用户(即攻击的最终目标并非站点本身)场景: 用户评论 <
div
>
一楼
二楼
三楼
div
>恩,看上去很正常的…但是突然有个坏人来了
<script >和<template>标签的使用
Vue提供了两种方式在
JavaScript
中的HTML模板分离,分别是 1、使用使用 代码如下: <
div
id="app"> <m-comp></m-comp> </
div
> <!-- 使用<script>标签定义根模板 --> <script type="text/template" id="mComp"> <!--
div
:外部容器,必须的 -->
JavaScript
87,997
社区成员
224,709
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章