`
alert_mm
  • 浏览: 167021 次
  • 性别: Icon_minigender_2
  • 来自: 厦门
社区版块
存档分类
最新评论

飘浮窗口及随滚动条滚动而滚动的层

IEJavaScriptCSSHTMLFirefox 
阅读更多

随滚动条滚动而滚动的层的实例：

<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属性让该层能够始终位于窗口的指定位置；（该方案看起来挺美，可惜ＩＥ并不支持。不过在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>

 

1
顶
1
踩
分享到：
| 常用CSS缩写语法总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics