页面的各种尺寸-------Stri's Blog

» 2009-8-25 19:28:39 已被归档于 JavaScript

code:

scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

例子详解:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Stri" />
<link rel="start" href="http://www.14pc.com" title="Home" />
<title>网页可见区</title>
<style type="text/css">
* { padding:0px; margin:0px; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; height:900px; }

#wrap { width:960px; margin:0 auto; height:500px; overflow:hidden; }
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function init(){
	document.onclick=is;}

function is(e){

var s;
s="";
s  +=  "\r\n网页可见区域宽："+  document.documentElement.clientWidth;   
s  +=  "\r\n网页可见区域高："+  document.documentElement.clientHeight;
s  +="\r\n PS:这个是当前页面可见"  
s  +=  "\n\r\n网页可见区域高："+  document.documentElement.offsetWidth  +"  (包括边线的宽)";   
s  +=  "\r\n网页可见区域高："+  document.documentElement.offsetHeight  +"  (包括边线的宽)"; 
s  +="\r\n PS:这个是当前页面实际工作区(和第一个可见区类似),不过,offsetHeight这个情况IE与FF中的不同"  
s  +=  "\n\r\n网页正文全文宽："+  document.documentElement.scrollWidth;   
s  +=  "\r\n网页正文全文高："+  document.documentElement.scrollHeight;
s  +="\r\n PS:这个是当前页面实际工作区"

s  +=  "\n\r\n网页被卷去的高："+  document.documentElement.scrollTop;   
s  +=  "\r\n网页被卷去的左："+  document.documentElement.scrollLeft;
s  +="\r\n PS:这个是当前页面滚动条的状态"
 
s  +=  "\n\r\n屏幕分辨率的高："+  window.screen.height;   
s  +=  "\r\n屏幕分辨率的宽："+  window.screen.width;
s  +="\r\n PS:这个是当前你的电脑分辨率情况."

s  +=  "\n\r\n屏幕可用工作区高度："+  window.screen.availHeight;   
s  +=  "\r\n屏幕可用工作区宽度："+  window.screen.availWidth;   
s  +="\r\n PS:这个是当前你的电脑工作区(除任务栏外)."
alert(s);

}</script>
<div id="wrap">单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
  单击显ffffffffffffffffffffffffffffffff示<br />
</div>
</body>
</html>

xhtml不支持document.body.scrollTop
当为html文档加上如下头以支持xhtml过渡标准时候，使用document.body.scrollTop值始终为0.这是document.body.scrollTop始终为0,这时需要用document.documentElement.scrollTop才能获得正确的值,而如果不加xhtml的申明,document.documentElement.scrollTop将为0

scrollTop的一些事
用它可以来做一些网页的滚动效果.经常见到的是图片游览.
比如,简单的这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Stri" />
<link rel="start" href="http://www.14pc.com" title="Home" />
<title>scroll</title>
<style type="text/css">
* { padding:0px; margin:0px; }

#a { width:116px; height:54px; padding:2px; }

#img_scroll_box { margin:0 auto; width:60px; height:58px; margin-top:100px; overflow:hidden; padding:2px; overflow:scroll; overflow-x:hidden; overflow-y:hidden; }

#img_scroll_box ul li { float:left; display:block; margin:3px; display:block; background-color:#FFF; padding:2px; height:48px; width:48px; border:1px solid #d5d5d5; }

#scroll_x_img_box { margin:50px auto; width:134px; overflow:scroll; overflow-y:hidden; overflow-x:hidden; }

#scroll_x_img_box li { display:inline; text-align:center; margin:3px; background-color:#FFF; padding:2px; height:48px; width:48px; }
</style>
</head>
<body>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
	}
	
	
function down(){
	
	var a=$("img_scroll_box").scrollTop;
	var b=$("img_scroll_box").scrollTop;

while(a<b+58){
		a=a+6;
		$("img_scroll_box").scrollTop=a;}
	}
        
function up(){
	var a=$("img_scroll_box").scrollTop;
	var b=$("img_scroll_box").scrollTop;
	while(a>b-58){
		a=a-6;
		$("img_scroll_box").scrollTop=a;}}
 
 function to_left(){
	 
	var a=$("scroll_x_img_box").scrollLeft;
	var b=$("scroll_x_img_box").scrollLeft;

while(a<b+129){
		a=a+6;
		$("scroll_x_img_box").scrollLeft=a;}
		 }  
   function to_right(){
	
	var a=$("scroll_x_img_box").scrollLeft;
	var b=$("scroll_x_img_box").scrollLeft;

while(a>b-126){
		a=a-6;
		$("scroll_x_img_box").scrollLeft=a;}
		 }
         </script>
<div id="img_scroll_box">
  <ul>
    <li><img src="http://www.qicailife.com/qcenter/images/noavatar_small.gif" width="48" height="48" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/04_avatar_small.jpg" /></li>
    <li> <img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/08_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/01_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/03_avatar_small.jpg" /></li>
  </ul>
</div>
<div style="margin:0 auto; width:116px; text-align:center; font-size:14px; font-family:Verdana, Geneva, sans-serif; margin-top:10px;"><a href="javascript:void(0);" onclick="down();">向下</a><a href="javascript:void(0);" onclick="up();">向上</a></div>
<div id="scroll_x_img_box"> <nobr>
  <ul style="padding:3px; height:60px;">
    <li><img src="http://www.qicailife.com/qcenter/images/noavatar_small.gif" width="48" height="48" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/04_avatar_small.jpg" /></li>
    <li> <img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/08_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/01_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/03_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/images/noavatar_small.gif" width="48" height="48" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/04_avatar_small.jpg" /></li>
    <li> <img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/08_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/01_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/03_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/images/noavatar_small.gif" width="48" height="48" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/04_avatar_small.jpg" /></li>
    <li> <img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/08_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/01_avatar_small.jpg" /></li>
    <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/03_avatar_small.jpg" /></li>
  </ul>
  </nobr> </div>
<div style="margin:0 auto; width:116px; text-align:center; font-size:14px; font-family:Verdana, Geneva, sans-serif; margin-top:10px;"><a href="javascript:void(0)" onclick="to_left();">向左</a><a href="javascript:void(0)" onclick="to_right();">向右</a></div>
</body>
</html>

看这段代码:

copy

code:

function up(){
	var a=$("img_scroll_box").scrollTop;
	var b=$("img_scroll_box").scrollTop;
	while(a>b-58){
		a=a-6;
		$("img_scroll_box").scrollTop=a;}}

关于scrollTop在前面也已有详解.主要是根据当前的scrollTop的大小来确定下一次scrollTop的大小.根据这一点.可以简单的做一个滚动效果的.如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Stri" />
<link rel="start" href="http://www.14pc.com" title="Home" />
<title>scroll</title>
<style type="text/css">
* { padding:0px; margin:0px; }

#a { width:116px; height:54px; padding:2px; }

#img_box { margin:0 auto; width:60px; height:106px; margin-top:100px; overflow:hidden; padding:2px; overflow:scroll; overflow-x:hidden; }
</style>
</head>
<body>
<div id="img_box">
  <div id="img_scroll_box">
    <ul>
      <li><img src="http://www.qicailife.com/qcenter/images/noavatar_small.gif" width="48" height="48" /></li>
      <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/04_avatar_small.jpg" /></li>
      <li> <img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/08_avatar_small.jpg" /></li>
      <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/01_avatar_small.jpg" /></li>
      <li><img src="http://www.qicailife.com/qcenter/data/avatar/000/00/00/03_avatar_small.jpg" /></li>
    </ul>
  </div>
  <div id="img_scroll_box0"></div>
</div>
<div style="margin:0 auto; width:200px; font-size:12px; font-family:Verdana, Geneva, sans-serif;">
  <ul>
    <li>scrollTop的变化情况:<span id="add"></span></li>
    <li>offsetTop的值:<span id="bdd"></span></li>
  </ul>
</div>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
	}
	
	$("img_scroll_box0").innerHTML=$("img_scroll_box").innerHTML;
function down(){
	
	if($("img_scroll_box0").offsetTop-$("img_box").scrollTop<=0){
		$("img_box").scrollTop=$("img_box").scrollTop-$("img_scroll_box0").offsetHeight;
	}else
	{$("img_box").scrollTop++;}
	$("add").innerHTML=$("img_box").scrollTop;
	$("bdd").innerHTML=$("img_scroll_box0").offsetTop;
	}

var aa=setInterval(function(){down();},40);
	$("img_box").onmouseover=function(){clearInterval(aa);}
	$("img_box").onmouseout=function(){aa=setInterval(function(){down();},40);}

</script>
</body>
</html>

分享一些高手们的技巧
scroll滚动的封装
(1)http://www.css88.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上无缝滚动的封装的演示</title>
<style type="text/css">
<!– ol, ul {
list-style:none;
margin:0
}

li { height:25px }
–>
</style>
</head>
<body>
<div style=" height:50px; line-height:50px; color:#FFFFFF; background:#333333; margin-bottom:20px; padding-left:30px; font-size:16px"> 向上无缝滚动的封装的演示-WEB前端开发DOME–<a style="color:#FFFFFF" href="http://www.9demo.com">www.9demo.com</a>–<a style="color:#FFFFFF" href="http://www.css88.com">www.css88.com</a></div>
<p>这个是速度为10的滚动</p>
<div id="demo" style="overflow: hidden; width: 322px; height: 50px">
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
    <li>888</li>
  </ul>
</div>
<hr />
<p>这个是速度为50的滚动</p>
<div id="demo2"  style=" overflow: hidden; width: 322px; height: 25px">
  <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
    <li>fff</li>
    <li>ggg</li>
    <li>hhh</li>
  </ul>
</div>
<script type="text/javascript">    
function next(elem){        
        do{        
            elem=elem.nextSibling;        
        }while(elem&&elem.nodeType!=1);        
        return elem;        
    }        
    //—查找第一个子元素的函数—//        
    function first(elem){        
        elem=elem.firstChild;        
        return elem && elem.nodeType!=1?next(elem):elem;        
    }    
        
    var scrollText = {    
        init : function(id, speed){    
            this.speed = speed || 10;    
            this.boxID = id;    
            this.scrollBox = document.getElementById(id);    
            this.appendBox = first(this.scrollBox).cloneNode(true);    
            this.scrollBox.appendChild(this.appendBox);    
            this.objs = {    
                scrollBox : this.scrollBox,    
                appendBox : this.appendBox,    
                speed : this.speed,    
                id : this.boxID    
            };    
            return this;    
        },    
   
        scrollUp : function(){    
            var self = this.objs;    
            self.begin = function(){    
                self.doScr = setInterval(function(){    
                    if(self['appendBox'].offsetHeight<=self['scrollBox'].scrollTop){    
                        self['scrollBox'].scrollTop-=first(self['scrollBox']).offsetHeight;    
                    }else{    
                        self['scrollBox'].scrollTop++;    
                    }    
                },self.speed);      
            }    
            self.begin();    
            self.scrollBox.onmouseover = function(){    
                clearInterval(self.doScr);    
            }    
   
            self.scrollBox.onmouseout = function(){    
                self.begin();    
            }    
        }    
   
    }    
        
    scrollText.init("demo").scrollUp();    
    scrollText.init("demo2", 50).scrollUp();    
        
</script>
</body>
</html>

(2)这个版本是朋友给,没有地址,所以保留作者.
这里有2个封装.很强大.

copy

code:

//<!-作者：风飘无影 -->
//参数说明: 要滚动的容器ID,方向r,l,t,b(t,b要注意内容必须是多行),延时速度,宽度，高度
function $(id){return document.getElementById(id);} 
function myMarquee(_id,_mode,_speed,_w,_h)
{	
	this.ID=_id;
	this.mode=_mode; 
	this.speed=_speed;
	this.txt=$(_id).innerHTML;
	this.width=_w;
	this.height=_h;
	var s='<div id="'+_id+'content" style="overflow: hidden;height:'+_h+'px;width:'+_w+'px;white-space: nowrap;"><div id="'+_id+'_show" style="display: inline">'+this.txt+'</div><div id="'+_id+'_hide" style="display: inline"></div></div>'
	$(_id).innerHTML=s;	
}

myMarquee.prototype.run=function()
	{
		
		$(this.ID+'_hide').innerHTML=$(this.ID+'_show').innerHTML;
		var temp='mymarquee'+this.ID+'=setInterval(\'doing("'+this.mode+'","'+this.ID+'")\','+this.speed+')'	
		eval(temp)

		var _id=this.ID;
		var _mode=this.mode;
		var _speed=this.speed;
		$(this.ID+'content').onmouseover=function() 
			{
				eval('clearInterval(mymarquee'+_id+')')
			}		
		$(this.ID+'content').onmouseout=function() 
			{
				eval('mymarquee'+_id+'=setInterval(\'doing("'+_mode+'","'+_id+'")\',_speed)');
			}
	}

function doing(mode,ID)
	{
	    //  alert(ID)
		  switch(mode) {
		   case 'l':
			if($(ID+'_show').offsetWidth-$(ID+'content').scrollLeft<=0)
			 $(ID+'content').scrollLeft-=$(ID+'_show').offsetWidth
			else{
			 $(ID+'content').scrollLeft++
			}
			break;
		   case 'r':
			if($(ID+'content').scrollLeft<=0)
			 $(ID+'content').scrollLeft+=$(ID+'_show').offsetWidth
			else{
			 $(ID+'content').scrollLeft--
			}
			break;
		   case 't':
			if($(ID+'_hide').offsetTop-$(ID+'content').scrollTop<=0)
			 $(ID+'content').scrollTop-=$(ID+'_show').offsetHeight
			else{
			 $(ID+'content').scrollTop++
			}
			break;
		   case 'b':
			if($(ID+'_show').offsetTop-$(ID+'content').scrollTop>=0)
			 $(ID+'content').scrollTop+=$(ID+'_hide').offsetHeight
			else{
			 $(ID+'content').scrollTop--
			}
			break;
		  }
	 }

实例2应用下载:下载

订阅此文章

页面的各种尺寸

相关评论(共0条)

分类

最新文章

最新回复

良师益友

日志归档