随滚动条滚动而滚动的层的实例:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">
</div>
<script language="javascript">
document.write(new Array(100).join("<br>"))
var init_pos=document.getElementById('oLayer').style.posTop ;
document.body.onscroll=function(){
document.getElementById('oLayer').style.posTop=document.body.scrollTop+init_pos ;
}
</script>
</BODY>
</HTML>
这里要强调一下
一、 在页面中加一个随着页面滚动条滚动的小图片广告,发现document.body.scrollTop
这个属性在本地的时候能取到值,但是传到服务器上的时候取到的值一直不变,其解决方案有如下2种:
<1> 原来在HTML文件头部声明了这样一句:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
改成这样就好了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
但是W3c的标准的引用,样式会发生变化。
<2>将document.body.scrollTop改为document.documentElement.scrollTop;
二、我使用的是IE7,实施很正常,可是当在IE6里面时,window.document.body.onscroll在我的IE6览器里根本就不触发,所以这又是一个新问题了,在网上找了找其原因及解决办法如下:
其原因还是和DOCTYPE声明有关,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,这个DOCTYPE声明是不会触发window.document.body.onscroll事件的,那如果再改变DOCTYPE声明的话又会影响到页面的CSS,所以此方法是不可行的,下面还有两种解决办法:
<1>使用setInterval或者setTimeout来不停的改变这个浮动层的位置;(这个方法很占资源,在不得以的情况下使用)
<2>CSS属性值position的fixed属性让该层能够始终位于窗口的指定位置;(该方案看起来挺美,可惜IE并不支持。不过在FireFox中的效果的确不错。正如文章在所说"从显示效果来看,在Firefox上的显示效果比IE中通过onscroll触发层的位置移动处理显示效果要好很多,看不到层的闪动。")
相关资料:
CSS positionfixed; for IE6
http://www.cssplay.co.uk/layouts/fixed.html
在下暂时还是使用了第一个方案...,具体实例如下:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="floatLayout" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">
</div>
<script language="javascript">
document.write(new Array(100).join("<br>"))
var init_pos=document.getElementById('floatLayout').style.posTop ;
function displaytopleft(){
cHeight = document.body.clientHeight;// 頁面的實際高度
var nowTop = 0;
//ie5.5之后已经不支持document.body.scrollX对象了,所以要看其ie版本
if (document.body && document.body.scrollTop)
{
nowTop=document.body.scrollTop;
}
if (document.documentElement && document.documentElement.scrollTop)
{
nowTop=document.documentElement.scrollTop;
}
lTop = nowTop+init_pos;
if(cHeight > lTop){
document.getElementById('floatLayout').style.posTop=lTop ;
}
}
function topleft()
{
//使用setInterval或者setTimeout来不停的改变这个浮动层的位置
window.setInterval("displaytopleft()",10);
}
topleft();
</script>
</BODY>
</HTML>
2、漂浮窗口的实现实例:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="floatLayout" style="position:absolute;z-index:1000;background:green;width:120px;height:70px">
</div>
<script language="javascript">
<!-- // Begin
var xPos = 800; //開始時浮動層left:800px
var yPos = 450; //開始時浮動層top:450px
var step = 1;
var delay = 20;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
floatLayout.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = floatLayout.offsetHeight;
Woffset = floatLayout.offsetWidth;
floatLayout.style.left = xPos + document.body.scrollLeft;
floatLayout.style.top = yPos + document.body.scrollTop;
if(yon){
yPos = yPos + step;
}
else{
yPos = yPos - step;
}
if(yPos < 0){
yon = 1;
yPos = 0;
}
if(yPos >= (height - Hoffset)){
yon = 0;
yPos = (height - Hoffset);
}
if(xon){
xPos = xPos + step;
}
else{
xPos = xPos - step;
}
if(xPos < 0){
xon = 1;
xPos = 0;
}
if(xPos >= (width - Woffset)){
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
floatLayout.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
// End -->
</script>
</BODY>
</HTML>
分享到:
相关推荐
无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中;点击页面的关闭按钮,弹出层消失,页面恢复原样。 这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》,使弹出窗口可以始终固定在浏览器的正...
+ 跟随滚动条滚动的广告 + 两侧对称的对联广告 + 从屏幕右下角自动弹出窗口 + 从浏览器右下角仿 QQ 弹出窗口 * 导航条的应用 + 用 CSS 制作水平导航条 + 仿选项卡导航菜单 + 仿 Flash 效果的渐隐菜单 第 3 ...
例如,当内容超出层的范围时,我们可以设定为滚动条显示,或者截断显示部分内容,甚至是通过控制层的布局来适应内容的变化。 时间轴是实现动画效果的另一种技术。在网页中,时间轴可以控制层的位置、大小、可见性等...
persistent_layers 不管滚动条如何拉动,这个层在窗口中的位置始终固定不变 P7_PowerToys_18 可以让你方便的插入代码,用开始和结束标签加入既存的代码等 justsoalt 用于在你的图片上加入alt标记,它可以利用模板一...
不管滚动条如何拉动,这个层在窗口中的位置始终固定不变 P7_PowerToys_18 可以让你方便的插入代码,用开始和结束标签加入既存的代码等 justsoalt 用于在你的图片上加入alt标记,它可以利用模板一次为多张图片加入alt...
插入一条滚动的文字,并且可以设置它滚动的方向。 Background that Fit.mxp 把一张图片作为背景铺满整个浏览器,可随浏览大小的变化自动调整。 URL into layer.mxp 在你的网页里面插入一个层,并且在这个层里面...
插入一条滚动的文字,并且可以设置它滚动的方向。 Background that Fit.mxp Download 点击下载 把一张图片作为背景铺满整个浏览器,可随浏览大小的变化自动调整。 URL into layer.mxp Download 点击下载 在你的网页...
mxp/不论浏览器的滚动条怎么拉,用这个插件插入的层总是保持在某个位置不动 mxp/虽然Dreamweaver不是编辑php的好工具,但是还是有这个php和mysql连接的插件供大家使用 mxp/插入php中的“include”函数 mxp/从新加载...