Stri's Blog

getBoundingClientRect() 来获取页面元素的位置

http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html

document.documentElement.getBoundingClientRect

下面这是MSDN的解释：

Syntax
oRect = object.getBoundingClientRect()
Return Value
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

还是实际解释下，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也不好理解，下面用图说明下。

该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

下面的代码举了个简单的例子，可以滚动滚动条之后点红色区域看各个值的变化:

<!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>getBoundingClientRect()</title>
<style type="text/css">
* { padding:0px; margin:0px; }

div { border:0; width:2000px; height:1000px; }

body { margin:0px; padding:0px; }
</style>
</head>
<body>
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
<script type="text/javascript">

document.getElementById('demo').onclick = function() {

if (document.documentElement.getBoundingClientRect) {

alert("left:" + this.getBoundingClientRect().left);

alert("top:" + this.getBoundingClientRect().top);

alert("right:" + this.getBoundingClientRect().right)

alert("bottom:" + this.getBoundingClientRect().bottom);

var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;

var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop;

alert("Demo的位置是X:" + X + ";Y:" + Y)

}

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

有了这个方法，获取页面元素的位置就简单多了

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y=this.getBoundingClientRect().top+document.documentElement.scrollTop;

Comments(0)

纯css效果

PS:只能看效果,本人觉得.应用到网站还是用JS比较好

<!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>demo</title>
<style type="text/css">
* { padding:0px; margin:0px; list-style:none; }

img { border:0px; }

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

#wrap { width:960px; margin:0 auto; }

.face_box { width:150px; float:left; height:600px; position:relative; background-color:#F6F6F6; padding-top:200px; }

.face_box a { display:block; padding:10px; color:#555; text-decoration:none; border:1px solid #f6f6f6; width:78px; height:78px; }

.face_box a span.left { float:left; width:150px; }

.face_box a span.right { display:none; float:left; }

.face_box a img { padding-bottom:10px; }

.face_box a:hover span.right { display:block; margin-left:10px; }

.face_box a:hover span.right span { height:18px; line-height:18px; }

.face_box a:hover span.right img { float:none; margin:0 2px; cursor:pointer; }

.face_box a:hover span.right span { display:block; height:20px; line-height:20px; }

.face_box a:hover span.right span img { margin:0 5px; }

.face_box a:hover span.right span span { display:block; width:150px; float:left; font-size:12px; font-weight:normal; color:#666; }

.face_box a:hover span.right span em { background:url(http://www.qicailife.com/image/magic/invisible.small.gif) no-repeat; font-size:12px; color:#000; font-weight:normal; font-style:normal; height:22px; padding:2px 0; color:#f60; padding-left:17px; line-height:22px; }

.face_box a:hover { text-decoration:none; height:150px; color:#555; border:1px solid #fff; width:500px; border:1px solid #e5e5e5; position:absolute; z-index:9999; background-color:#fff; }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrap">
  <div class="face_box"><a href="javascript:void(0);"><span class="left"><img src="http://center.blueidea.com/avatar.php?uid=502502&size=big" width="64" height="64" /></span><span class="right"><span><em>ㄑ可乐ㄑㄑ</em></span><span><span>UID:44</span><span>帖子:9</span></span><span><span>精华:11</span><span>积分:39</span></span><span><span>阅读权限:20</span><span>在线时间:125小时</span></span><span><span>注册时间:2008-12-31</span><span>最后登陆:2009-8-27</span></span><span><img src="http://www.l2caise.cn/templates/gray_1/real_pic/qq.gif" alt="qq" onclick="ddd();" /><img src="http://www.l2caise.cn/templates/gray_1/real_pic/forumlink.gif" /><img src="http://www.l2caise.cn/templates/gray_1/real_pic/userinfo.gif" /></span></span> </a> </div>
  <div class="fdsaf" style="float:left; padding-top:200px;">
    <p>兄弟,你的心就在这里.不管别人怎么.哥几个挺你.</p>
    <p>今晚的任务,哥几个全醉~!</p>
  </div>
</div>
</body>
</html>

Comments(3)

缓冲效果

菜鸟版代码如下:
理解这段代码就基本上掌握了

copy

code:

function f_s() {
    var obj = document.getElementById("top");
    obj.style.display = "block";
    obj.style.height = "1px";

    var sw = function () {
        var s_width = parseInt(obj.style.height);
        if (s_width < 350) {
            obj.style.height = (s_width + Math.ceil((350 - s_width) / 15)) + "px";
        }
        else {
            clearInterval(st);
        }
    }
    var st = window.setInterval(sw, 1);
}

<!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; }

#top { width:80px; height:350px; float:left; background-color:#090; display:none; color:#fff; text-align:right; border:1px solid #000; s
}

#top0 { width:80px; float:right; height:350px; background-color:#090; display:none; color:#fff; text-align:right; border:1px solid #000; s
}
</style>
<link href="cssStyle/style_1_common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_head"></div>
<div id="wrap">
  <h1>缓冲效果</h1>
  <a href="javascript:void(0)" onclick="f_s();">打开</a>这是一个由快到慢的过程<a href="javascript:void(0)" onclick="close_f_s('top','350px')">关闭</a><br />
  <a href="javascript:void(0)" onclick="s_f();">打开</a>这是一个由慢到快的过程<a href="javascript:void(0)" onclick="close_f_s('top0','350px')">关闭</a>
  <div id="top"></div>
  <div id="top0"></div>
</div>
<div id="page_foot"></div>
<script type="text/javascript">
function $(id) {
    return document.getElementById(id);
}
function f_s() {
    var obj = document.getElementById("top");
    obj.style.display = "block";
    obj.style.height = "1px";

function s_f() {

var obj = document.getElementById("top0");
    var mg = 1;
    obj.style.display = "block";
 obj.style.height = "1px";

var sw = function () {
        var s_width = parseInt(obj.style.height);
        if (s_width < 350) {
            mg *= 1.05;

obj.style.height = (s_width + mg) + "px";
        }
        else {
            obj.style.height = "350px";
            clearInterval(st);
        }
    }
    var st = window.setInterval(sw, 1);
}
function close_f_s(id, w) {
    var obj = document.getElementById(id);

中级版本
http://bbs.blueidea.com/viewthread.php?tid=2843406&page=1#pid3929392

copy

code:

/*
    函数名称: Scroll
    Scroll(obj, h, s)
    参数说明:
        obj,[object]  id值或对象.     必需
          h,[height]  展开后的高度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开(对象的高度等于展开后的高度)
        false   关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
    if(obj == undefined){return false;}
    var h = h || 200;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    obj.style.height = oh;
    obj.style.display = "block";
	obj.style.overflow = "hidden";
    if(obj.getAttribute("oldHeight") == null){
        obj.setAttribute("oldHeight", oh);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }else{
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.height = oldH+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
	return status;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>层展开/关闭 - 运动缓冲效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="小秦,展开,关闭,运动缓冲,效果,javascript,封装" />
<meta name="description" content="展开/关闭 - 运动缓冲效果" />
<meta name="copyright" content="Copyright 2008 XQin.cn" />
<meta name="author" content="小秦" />
<script type="text/javascript">
/*
    函数名称: Scroll
    Scroll(obj, h, s)
    参数说明:
        obj,[object]  id值或对象.     必需
          h,[height]  展开后的高度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开(对象的高度等于展开后的高度)
        false   关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
    if(obj == undefined){return false;}
    var h = h || 200;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    obj.style.height = oh;
    obj.style.display = "block";
	obj.style.overflow = "hidden";
    if(obj.getAttribute("oldHeight") == null){
        obj.setAttribute("oldHeight", oh);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }else{
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.height = oldH+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
	return status;
}
window.onload= function(){
    document.getElementById('detail').onclick = function(){
        Scroll('detail', 300, 1.3);
    }
    document.getElementById('text').onclick = function(){
        Scroll('text');
    }
}
</script>
</head>
<body>
<p id="detail" style="border:1px dashed #f00;">这是一个段落啦!!哇哈哈哈<br/>点我一下下啦:)</p>
<div id="text" style="border:1px solid #0f0">Hello World!<br/>你敢点我不  -_|||</div>
<button onclick="Scroll('text', 400, 1.2)">Hello World</button>
</body>
</html>

高级版本
这个很全,不过,我是没有看懂的.- -!!
http://www.cnblogs.com/cloudgamer/

<!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=gb2312" />
<title>Tween</title>
</head>
<body>
<div style="padding-left:50px;">
  <div style="position:relative; border:1px solid #000000; width:550px; height:50px;">
    <div id="idMove" style="width:50px; height:50px; background:#930; position:absolute;"></div>
  </div>
  <div style="position:relative;width:550px;height:200px; margin-top:50px;">
    <div id="idChart" style="border:1px solid #000;height:200px;"> </div>
    <div id="idLine" style="position:absolute;top:0;left:0;height:200px;width:1px;background:#000;"></div>
  </div>
</div>
<div>
  <p> Tween类型： <br />
    <label>
      <input name="vTween" type="radio" value="Linear" checked="checked" />
      Linear </label>
    <label>
      <input name="vTween" type="radio" value="Quad" />
      Quadratic </label>
    <label>
      <input name="vTween" type="radio" value="Cubic" />
      Cubic </label>
    <label>
      <input name="vTween" type="radio" value="Quart" />
      Quartic </label>
    <label>
      <input name="vTween" type="radio" value="Quint" />
      Quintic </label>
    <label>
      <input name="vTween" type="radio" value="Sine" />
      Sinusoidal </label>
    <br />
    <label>
      <input name="vTween" type="radio" value="Expo" />
      Exponential </label>
    <label>
      <input name="vTween" type="radio" value="Circ" />
      Circular </label>
    <label>
      <input name="vTween" type="radio" value="Elastic" />
      Elastic </label>
    <label>
      <input name="vTween" type="radio" value="Back" />
      Back </label>
    <label>
      <input name="vTween" type="radio" value="Bounce" />
      Bounce </label>
  </p>
  <p> ease类型： <br />
    <label>
      <input name="vEase" type="radio" value="easeIn" checked="checked" />
      easeIn </label>
    <label>
      <input name="vEase" type="radio" value="easeOut" />
      easeOut </label>
    <label>
      <input name="vEase" type="radio" value="easeInOut" />
      easeInOut </label>
  </p>
  <input id="idSpeed" type="button" value="减慢速度" />
  <input id="idRun" type="button" value=" Run " />
</div>
<script>
/*
算法来源：http://www.robertpenner.com/easing/
*/
var Tween = {
	Linear: function(t,b,c,d){ return c*t/d + b; },
	Quad: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c *(t/=d)*(t-2) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t + b;
			return -c/2 * ((--t)*(t-2) - 1) + b;
		}
	},
	Cubic: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return c*((t=t/d-1)*t*t + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t + b;
			return c/2*((t-=2)*t*t + 2) + b;
		}
	},
	Quart: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c * ((t=t/d-1)*t*t*t - 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
			return -c/2 * ((t-=2)*t*t*t - 2) + b;
		}
	},
	Quint: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return c*((t=t/d-1)*t*t*t*t + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
			return c/2*((t-=2)*t*t*t*t + 2) + b;
		}
	},
	Sine: {
		easeIn: function(t,b,c,d){
			return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
		},
		easeOut: function(t,b,c,d){
			return c * Math.sin(t/d * (Math.PI/2)) + b;
		},
		easeInOut: function(t,b,c,d){
			return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
		}
	},
	Expo: {
		easeIn: function(t,b,c,d){
			return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
		},
		easeOut: function(t,b,c,d){
			return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if (t==0) return b;
			if (t==d) return b+c;
			if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
			return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
		}
	},
	Circ: {
		easeIn: function(t,b,c,d){
			return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
		},
		easeOut: function(t,b,c,d){
			return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
			return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
		}
	},
	Elastic: {
		easeIn: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		},
		easeOut: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
		},
		easeInOut: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
			return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
		}
	},
	Back: {
		easeIn: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*(t/=d)*t*((s+1)*t - s) + b;
		},
		easeOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		},
		easeInOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158; 
			if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
			return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
		}
	},
	Bounce: {
		easeIn: function(t,b,c,d){
			return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
		},
		easeOut: function(t,b,c,d){
			if ((t/=d) < (1/2.75)) {
				return c*(7.5625*t*t) + b;
			} else if (t < (2/2.75)) {
				return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
			} else if (t < (2.5/2.75)) {
				return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
			} else {
				return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
			}
		},
		easeInOut: function(t,b,c,d){
			if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
			else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
		}
	}
}

//////////////////////////////////////////////////////////

var $ = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

var Each = function(list, fun){
	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

//////////////////////////////////////////////////////////

var fun, iChart = 550, iDuration = 100;

////////////////////////////////////////////////////////

function Chart(){
	var a = [];
	for (var i = 0; i < iChart; i++) {
		a.push('<div style="background-color:#f60;font-size:0;width:3px;height:3px;position:absolute;left:' + (i-1) + 'px;top:' + (Math.ceil(fun(i,200,-200,iChart))) + 'px;"><\/div>');
	}
	$("idChart").innerHTML = a.join("");
}

////////////////////////////////////////////////////////

var arrTween = document.getElementsByName("vTween");
var arrEase = document.getElementsByName("vEase");

Each(arrTween, function(o){ o.onclick = function(){ SetFun(); Chart(); } })
Each(arrEase, function(o){ o.onclick = function(){ SetFun(); Chart(); } })

$("idRun").onclick = function(){ SetFun(); Chart(); Move(); }

$("idSpeed").onclick = function(){
	if(iDuration == 100){
		iDuration = 500; this.value = "加快速度";
	}else{
		iDuration = 100; this.value = "减慢速度";
	}
}
</script>
</body>
</html>

附高级版本:下载

Comments(1)

页面的各种尺寸

copy

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应用下载:下载

Comments(0)

事件event的一些事儿

之前在在试做一个小模块,刚开始做的还挺顺利,到后来开始出现了一些小问题,是关于
Focus和blur的焦点事件.不过写篇文章不是说这个处理结果.因为很多东西都是要必须经常看到.像这些:
先看JS手册里的描述(以下信息来自引用);

event 对象:
代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
比较常见的属性有:
altKey: 设置或获取 Alt 键的状态
altLeft 设置或获取左 Alt 键的状态。
button 设置或获取用户所按的鼠标按钮。
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条.
ctrlKey 设置或获取 Ctrl 键的状态。
ctrlLeft 设置或获取左 Ctrl 键的状态
keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
shiftKey 设置或获取 Shift 键的状态。
shiftLeft 设置或获取左 Shift 键的状态。
srcElement 设置或获取触发事件的对象。

事件响应
在事件参数问题上,IE和DOM leve-2标准不同,在后者的标准中,event对象是被作为事件接收函数(闭包)的参数传递的,而在IE中则是作为window对象(全局)的属性.所在首先处理兼容;

copy

code:

  function Fe(event1){
	   event1=(event1) || window.event;//兼容两种游览器的event参数模式
	   var target=event1.srcElement || event1.target;//兼容两种游览器的event参数属性
	  alert(target.type);

  }

常见表单中的Enter+ctrl提交

copy

code:

<script type="text/javascript">
window.onload=document.getElementById("bb1").onkeydown=function bb(evt){
	evt=evt || window.event;
	if(evt.keyCode==13 && evt.ctrlKey)//这里你可用shiftKey,altKey来进行一些其它事件模式
	{alert("okkk");}}
    </script>

禁右键

copy

code:

<script>
document.oncontextmenu=function(e){
if(document.all){ return false; }else{ e.preventDefault();}
}
</script>

上面引用event其它属性:

<!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>
</head>
<body>
<div style=" padding:200px; border:1px solid #f90; width:200px; height:800px; margin:0 auto;">
  <div id="div11" style="width:200px;cursor:pointer; height:200px; background-color:#090; color:#fff;" onmousemove="mousedown()"></div>
</div>
<script type="text/javascript">
function mousedown(){
	document.onmousemove=mousemove;
	document.onmouseup=mouseup;
	}
 function mousemove(e){
	   var e, obj;
  obj=document.getElementById("div11");
  e=window.event?window.event:e;
obj.innerHTML=e.x+":"+e.y;
//screenX,screenY.事件是相对于屏幕
//offsetX,offsetY.等价于pageX,pageY:事件发生的位置在文档空间中的X和Y坐标
//x,y等价于layerX,layerY:事件在body元素中(如果事件目标没有被定位)或定位元素之内X和Y坐标
//clientX,clientY.事件在游览器窗口中的内容区域的X和Y坐标
//网页可见区域宽： document.body.clientWidth;
/*
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
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 相对文档的水平座标+垂直方向滚动的量

*/
}
function mouseup(e){
	document.onmousemove="";}</script>
</body>
</html>

其它应用

<!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>
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
function $(id){
	
	return document.getElementById(id);
	}
var  obj ,a,_max_i,_dragActive=true;
window.onload=function dragInit(){
	for(var i=0;( a=document.getElementsByTagName("div")[i]);i++)
	{
		obj=$(a.getAttribute("id"));
		if(obj.style.zIndex==null || obj.style.zIndex=="")
		{obj.style.zIndex=i;}
		_max_i=Math.max(obj.style.zIndex,_max_i);}
		_max_i++;
	}

Comments(0)

最新日志

getBoundingClientRect() 来获取页面元素的位置

纯css效果

缓冲效果

页面的各种尺寸

事件event的一些事儿

分类

最新文章

最新回复

良师益友

日志归档