<html>
<head>
<script>
function move()
{
var d= document.getElementById("div1");
d.style.Top= document.body.scrollTop+10;
}
setTimeout("move()",50);
</script>
<style type="text/css">
#div1
{
position:absolute;
left:100px;
top:10px;
width:100px;
height:500px;
border:1px solid black;
z-index:"50";
}
</style>
</head>
<body id="div1" onscroll="move()" >
<div id="div1" >
<h3>可随滚动条移动的窗口</h3>
</div>
<div>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
</div>
</body>
</html>
请教各位大神,我是新手,想自己编个随滚动条移动的图层的代码,可是上面的代码我运行了,图层怎么不动啊?我错了哪里了,望各位大神指导。在这里先谢谢你了。
<head>
<script>
function move()
{
var d= document.getElementById("div1");
d.style.Top= document.body.scrollTop+10;
}
setTimeout("move()",50);
</script>
<style type="text/css">
#div1
{
position:absolute;
left:100px;
top:10px;
width:100px;
height:500px;
border:1px solid black;
z-index:"50";
}
</style>
</head>
<body id="div1" onscroll="move()" >
<div id="div1" >
<h3>可随滚动条移动的窗口</h3>
</div>
<div>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
</div>
</body>
</html>
请教各位大神,我是新手,想自己编个随滚动条移动的图层的代码,可是上面的代码我运行了,图层怎么不动啊?我错了哪里了,望各位大神指导。在这里先谢谢你了。
解决方案 »
- 再问一个fullCalendar 本地化的问题
- JS如何实现判断一个表单某一列的所有数据
- 有没有方法获得鼠标所在位置的像素的颜色
- 这段Javascript代码不知哪儿有误,本意是图片一直滚,可是我的只滚了不到10秒就不动了,再刷新才再滚10秒
- 这个JS在IE FF中运行为什么就会出错呢??opera可以
- javascript控制table的问题! 高手来!!
- 有没有办法在子窗口关闭的时候,在不刷新父窗口的条件下,让父窗口执行一个函数
- 惊讶的发现,原来javascipt不怎么难,以前一点也没学过,一个星期的煎熬还是把任务完成了,散分
- 如何在网页打开的时候把地址栏等去掉?
- javascript中有没有判断日期的函数?
- Jquery动态生成的 标签,onclick事件,怎么传递对象类型的参数
- 新手请教:关于jquery对表格的操作
{
var d= document.getElementById("div1");
//d.style.Top= document.body.scrollTop+10;
d.style.Top= (document.body.scrollTop || document.documentElement.scrollTop) +10;
}
是不是这样啊朋友,但是那个div1图层还是没动啊。
d.style.Top= (document.body.scrollTop || document.documentElement.scrollTop) +10 +'px'
朋友加了'px'还是不动。
#div1
{
position:fixed;
left:100px;
top:10px;
width:100px;
height:500px;
border:1px solid black;
z-index:"50";
}
</style>
滚动啥啊,直接position:fixed;就好了。
function move(){
var d = document.getElementById("div1");
var scrollTop = ((document.body.scrollTop)+10);
d.style.top = scrollTop+'px';
}
setInterval(move(),30);这样修改一下就可以了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1
{
position:absolute;
left:100px;
top:10px;
width:100px;
height:500px;
border:1px solid black;
z-index:5;
}
</style>
<script type="text/javascript">
function move(){
var d=document.getElementById("div1");
d.style.top = document.body.scrollTop+10+"px";
}
window.onscroll=function(){
move();
}
</script>
</head>
<body>
<div id="div1" >
<h3>可随滚动条移动的窗口</h3>
</div>
<div>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
</div>
</body>
</html>
你看一下:
<script type="text/javascript">
//<![CDATA[
var tips; var theTop = 250/*这是默认高度*/; var old = theTop;
function initFloatTips() {
tips = document.getElementById('floatTips');
moveTips();
};
function moveTips() {
var tt=50;
if (window.innerHeight) {
pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}
else if (document.body) {
pos = document.body.scrollTop;
}
pos=pos-tips.offsetTop+theTop;
pos=tips.offsetTop+pos/10;
if (pos < theTop) pos = theTop;
if (pos != old) {
tips.style.top = pos+"px";
tt=10;
}
old = pos;
setTimeout(moveTips,tt);
}
//!]]>
</script>
<style type="text/css">
div#floatTips{
position:absolute;
border:solid 1px #777;
padding:3px;
top:250px;
width:300px;
background:#333;
color:white;
opacity: 0.5;/*这两句没法通过验证的*/
filter:alpha(opacity=50);/*这两句没法通过验证的*/
}
</style>
<body onload="initFloatTips()">
<div id="floatTips">
这是一个浮动的半透明层哦,可以通过css,xhtml验证的哦,不信,你试试~
</div>
</body>