offset家族与事件总结

1/offsetWidth 和 offsetHeight

得到对象的宽度和高度(自己的，与他人无关)

offsetWidth = width + border + padding

div { width:220px; border-left:2px solid red; padding:10px;}

div.offsetWidth = 220 + 2 + 20

为什么不用 div.style.width 因为东西只能得到行内的数值

2/offsetLeft 和 offsetTop

返回距离上级盒子（最近的带有定位）左边的位置

如果父级都没有定位则以body 为准

这里的父级指的是所上一级不仅仅指的是父亲还可以是爷爷曾爷爷曾曾爷爷。。。。

offsetLeft 从父级的padding 开始算父亲的border 不算

总结一下：就是子盒子到定位的父盒子边框到边框的距离

3/offsetParent

offsetParent返回该对象的父级（带有定位）不一定是亲的爸爸

前面学过一个返回父亲(亲的) parentNode 有所区别

offsetParent 和 parentNode的区别：

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

4/offsetTop 和　style.top 的区别

１．最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以只有定位的盒子才有 left top right

２．offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

３．offsetTop 只读，而 style.top 可读写。

４．如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

５．最重要的区别 style.left 只能得到行内样式 offsetLeft 随便

案例：筋斗云

<!DOCTYPE html><html>

<style>

*{margin: 0; padding: 0;}

ul {list-style:none;}

body {

background-color: #000;

}

.nav {

width: 800px;

height: 42px;

background:url("images/rss.png") no-repeat right center #fff;

margin: 100px auto;

border-radius: 5px;

position: relative;

}

.cloud {

width: 83px;

height: 42px;

position: absolute;

top: 0;

left: 0;

background: url(images/cloud.gif) no-repeat;

}

.nav ul {

position: absolute;

top: 0;

left: 0;

}

.nav li {

float: left;

width: 83px;

height: 42px;

line-height: 42px;

text-align: center;

color: #000;

cursor: pointer;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

var cloud = document.getElementById("cloud"); // 云彩

var nav = document.getElementById("nav");

var lis = nav.children[1].children;

var current = 0; // 用于存放点击时候的 offsetLeft

//alert(lis.length);

for(var i=0; i<lis.length;i++) {

lis[i].onmouseover = function() {

// alert(this.offsetLeft);

target = this.offsetLeft; // 把左侧的位置，给 target

}

lis[i].onmouseout = function() {

target = current; // 鼠标离开 target 是刚才我们点击的位置

}

lis[i].onclick = function() {

current = this.offsetLeft; // 点击的时候把当前位置存贮一下

}

// 缓动公式

var leader = 0, target = 0;

setInterval(function(){

leader = leader + (target - leader ) / 10;

cloud.style.left = leader + "px";

},10);

</script>

事件对象

我们学过一些事件 : onmouseover onmouseout onclick .....

btn.onclick = function(event) { 语句 }

event 单词翻译过来事件的意思

event 就是事件的对象指向的是事件是 onclick

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。

普通浏览器支持 event

ie 678 支持 window.event

所以我们采取兼容性的写法：

var event = event || window.event;

1/event 常见属性

点击跟随鼠标

<!DOCTYPE html><html>

<style>

#image {

width: 99px;

position: absolute;

top:0;

left: 0;

}

</style>

</head>

<body>

</body>

</html>

var image = document.getElementById("image");

document.onclick = function(event) {

var event = event || window.event;

targetX = event.clientX - image.offsetWidth /2;

targetY = event.clientY - image.offsetHeight /2;

}

// 缓动

var leaderX = 0,

leaderY= 0,

targetX = 0,

targetY = 0;

setInterval(function() {

leaderX = leaderX + (targetX - leaderX) / 10;

leaderY = leaderY + (targetY - leaderY) / 10;

image.style.left = leaderX + "px";

image.style.top = leaderY + "px";

},10)

</script>

案例：放大镜

<!DOCTYPE html><html>

<style>

* {margin: 0;padding: 0;}

img {

vertical-align: top;

}

.box {

width: 350px;

height: 350px;

margin:100px;

border: 1px solid #ccc;

position: relative;

}

.big {

width: 450px;

height: 450px;

position: absolute;

top: 0;

left: 360px;

border: 1px solid #ccc;

overflow: hidden;

display: none;

}

.mask {

width: 100px;

height: 100px;

background: rgba(255, 255, 0, 0.4);

position: absolute;

top: 0;

left: 0;

cursor: move;

display: none;

}

.small {

position: relative;

}

.big img {

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

<div class="small">

</div>

</div>

</body>

</html>

var fdj = document.getElementById("fdj"); // 获得最大的盒子

var small = fdj.children[0]; // 获得small 小图片 350盒子

var big = fdj.children[1]; // 获得大图片 800 盒子

var mask = small.children[1]; // 小的黄色盒子

var bigImage = big.children[0]; // 大盒子里面的图片

small.onmouseover = function() { // 鼠标经过显示出他们

mask.style.display = "block";

big.style.display = "block";

}

small.onmouseout = function() {

mask.style.display = "none";

big.style.display = "none";

}

// 鼠标在small 内移动

var x = 0;

var y = 0;

small.onmousemove = function(event) {

var event = event || window.event;

x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标

//alert(this.offsetLeft);

y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;

if(x < 0)

{

x = 0;

}

else if(x > small.offsetWidth - mask.offsetWidth)

{

x = small.offsetWidth - mask.offsetWidth;

}

if(y<0)

{

y = 0;

}

else if(y > small.offsetHeight - mask.offsetHeight)

{

y = small.offsetHeight - mask.offsetHeight;

}

mask.style.left = x + "px";

mask.style.top = y + "px";

/* 大图盒子 / 小图盒子倍数

我们再小图移动的距离 * 倍数 == 大图的位置*/

bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px";

bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px";

}

</script>

拖动水平条

1.拖动原理 == 鼠标按下接着移动鼠标。

bar.onmousedown = function(){

document.onmousemove = function(){

}

2.当我们按下鼠标的时候，就要记录当前鼠标的位置 - 大盒子的位置

算出 bar 当前在大盒子内的距离。

1/防止选择拖动

我们知道按下鼠标然后拖拽可以选择文字的。

清除选中的内容

<!DOCTYPE html><html>

<style>

* {margin:0;padding:0;}

.scroll {

width: 400px;

height: 8px;

background-color: #ccc;

margin: 100px;

position: relative;

}

.bar {

width: 10px;

height: 22px;

background-color: #369;

position: absolute;

top: -7px;

left: 0;

cursor: pointer;

}

.mask {

width: 0;

height: 100%;

background-color: #369;

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

var scrollBar = document.getElementById("scrollBar");

var bar = scrollBar.children[0];

var mask = scrollBar.children[1];

var demo = document.getElementById("demo");

/* document.onmousedown = function() {

alert(11);

}*/

bar.onmousedown = function(event) {

var event = event || window.event;

var leftVal = event.clientX - this.offsetLeft;

// alert(11);

// 拖动一定写到 down 里面才可以

var that = this;

document.onmousemove = function(event) {

var event = event || window.event;

that.style.left = event.clientX - leftVal + 'px';

//alert(that.style.left);

var val = parseInt(that.style.left);

if(val < 0)

{

that.style.left = 0;

} else if(val > 390)

{

that.style.left = "390px";

}

mask.style.width = that.style.left; // 遮罩盒子的宽度

//计算百分比

demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

}

document.onmouseup = function() {

document.onmousemove = null; // 弹起鼠标不做任何操作

}

</script>

offset家族与事件总结

推荐阅读更多精彩内容