一稻据、offset家族
offset （自己的）
js中有一套方便獲取元素尺寸的方法：offset东且。- 圖片1.png
offsetWidth offsetHeight
得到對象的寬度和高度施掏。
offsetWidth = width + border + padding
div.style.width 只能得到行內(nèi)（body中的css樣式洒试，行內(nèi)/嵌入/外鏈）的數(shù)值缀棍。offsetLeft offsetTop
返回距離上級盒子（最近的帶有定位）左邊/上邊的位置。
如果父級都沒有定位則以body 為準(zhǔn)秦踪，這里的父級指的是所有上一級褐捻，不僅僅指的是父親，還可以是 爺爺 曾爺爺椅邓。舍扰。
從父級的padding開始算的，border不算希坚， 就是子盒子到定位的父盒子邊框到邊框的距離
- 筋斗云
var cloud = document.getElementById("cloud");
var nav = document.getElementById("nav");
var lis = nav.children[1].children;
var current = 0;
for(i = 0 ;i < lis.length; i++){
lis[i].onmouseover = function(){
target = this.offsetLeft;
}
lis[i].onmouseout = function(){
target = current;
}
lis[i].onclick = function(){
current = this.offsetLeft;
}
}//error：寫成i<=
var leader = 0 ,target = 0;
setInterval(function(){
leader = leader +( target - leader)/10;
cloud.style.left = leader + "px";
},30);
- offsetParent
返回對象的父親 （帶有定位的边苹、 不一定是親的）
parentNode：返回父親（親的）
如果當(dāng)前元素的父級元素沒有進(jìn)行CSS定位（position relative），offsetParent為body裁僧。
如果當(dāng)前元素的父級元素中有CSS定位个束，offsetParent取最近的那個(gè)父級元素慕购。 - offsetTop style.top 的區(qū)別
（1）、最大區(qū)別是offsetLeft 可以返回沒有定位盒子的距離左側(cè)的位置茬底， 而 style.top 不可以 只有定位的盒子 才有 left top right沪悲。
（2）、offsetTop 返回的是數(shù)字阱表，而 style.top 返回的是字符串殿如，除了數(shù)字外還帶有單位：px。
style.left = 300px parseInt（300px）想要相加就用parseInt最爬。
（3）涉馁、offsetTop 只讀，而 style.top 可讀寫（可以更改值）爱致。
（4）烤送、如果沒有給 HTML元素指定過 top樣式，則 style.top 返回的是空字符串糠悯。
（5）帮坚、最重要的區(qū)別style.left 只能得到行內(nèi)樣式，offsetLeft 不需要互艾。
二试和、事件對象
- onmouseover onmouseout onclick .....等都是事件。在觸發(fā)DOM上的某個(gè)事件時(shí)纫普，會產(chǎn)生一個(gè)事件對象event阅悍，這個(gè)對象中包含著所有與事件有關(guān)的信息。所有瀏覽器都支持event對象局嘁，但支持的方式不同。
體會
document.onclick = function(event){ // 文檔中點(diǎn)擊
// console.log(window.event.clientX); ie 678
/*console.log(event.clientX);
console.log(event.clientY);*/
var event = event || window.event; // 兼容性寫法
console.log(event.clientY);// 頁面
console.log(event.pageY);//頁面+滾動條
console.log(event.screenY);//電腦屏幕
- event 常見屬性
data 返回拖拽對象的URL字符串（dragDrop）
width 該窗口或框架的高度
height 該窗口或框架的高度
pageX 光標(biāo)相對于該網(wǎng)頁的水平位置（ie無）
pageY 光標(biāo)相對于該網(wǎng)頁的垂直位置（ie無）
screenX 光標(biāo)相對于該屏幕的水平位置
screenY 光標(biāo)相對于該屏幕的垂直位置
target 該事件被傳送到的對象
type 事件的類型
clientX 光標(biāo)相對于該網(wǎng)頁的水平位置 （當(dāng)前可見區(qū)域）
clientY 光標(biāo)相對于該網(wǎng)頁的水平位置
- pageX clientX screenX 區(qū)別
screen X screenY晦墙， 是以我們的電腦屏幕 為基準(zhǔn)點(diǎn)
pageX pageY悦昵，以我們的文檔 （絕對定位） 的基準(zhǔn)點(diǎn) 對齊（加上滾動條之間隱藏區(qū)域） ie678 不認(rèn)識
clientX clientY，以 可視區(qū)域 為基準(zhǔn)點(diǎn) 類似于固定定位 - 鼠標(biāo)點(diǎn)擊對象移動
document.onclick :點(diǎn)擊dom中的對象晌畅，實(shí)現(xiàn)圖的移動
var image = document.getElementById("image");
document.onclick = function(event){
var event = event || window.event; //error忘記這個(gè)dom中的事件對象了
targetX = event.clientX - image.offsetWidth/2;
targetY = event.clientY - image.offsetHeight/2;//error 忘記除2 是減號
}
var leaderX = 0, targetX = 0, leaderY = 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";
},8);
三但指、常用事件
- 常用事件
onclick
onmouseover 鼠標(biāo)經(jīng)過
onmouseout 鼠標(biāo)離開
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)彈起
onmousemove 當(dāng)鼠標(biāo)移動的時(shí)候 就是說，鼠標(biāo)移動一像素就會執(zhí)行的事件抗楔。
-
div.onmouseover 和 div.onmousemove 區(qū)別
他們相同點(diǎn) 都是 經(jīng)過 div 才會觸發(fā)
div.onmouseover 經(jīng)過只觸發(fā)一次棋凳。
div.onmousemove 每移動一像素，就會觸發(fā)一次 连躏。
- 放大鏡
思路總結(jié)：
css定位很重要剩岳，放大鏡定位在小圖片中，大圖片定位在大盒子中入热，大圖片和放大鏡隱藏拍棕，移動時(shí)出現(xiàn)晓铆，首先設(shè)置放大鏡在小圖片中的移動位置限制，再設(shè)置右邊盒子的移動大小绰播。
function $(id) {
return document.getElementById(id);
}
var small = $("box").children[0];
var big = $("box").children[1];
var yellow = small.children[1];
var bigimage = big.children[0];
small.onmouseover = function(){
big.style.display = "block";
yellow.style.display = "block";
}
small.onmouseout = function(){
big.style.display = "none";
yellow.style.display = "none";
}
small.onmousemove = function(event){
var event = event || window.event;
//鼠標(biāo)移動黃色塊在小盒子里面的變化骄噪，需要計(jì)算
var x = event.clientX - this.offsetParent.offsetLeft - yellow.offsetWidth/2;
var y = event.clientY - this.offsetParent.offsetTop - yellow.offsetHeight/2;
if(x<0){
x = 0 +"px";
}
else if(x>this.offsetWidth - yellow.offsetWidth) {
x = this.offsetWidth - yellow.offsetWidth;
}
if(y<0) {
y = 0 +"px";
}
else if(y>this.offsetHeight - yellow.offsetHeight) {
y = this.offsetHeight - yellow.offsetHeight;
}
yellow.style.left = x+"px";
yellow.style.top = y+"px";//鼠標(biāo)在小盒子里面移動，改變的是黃色的位置蠢箩。
//大盒子里圖片的移動是小盒子的倍數(shù)（大盒子/ 小盒子的倍數(shù)）
bigimage.style.left = -x*big.offsetWidth/small.offsetWidth+"px";
bigimage.style.top = -y*big.offsetHeight/small.offsetHeight+"px";
}
防止選擇拖動
我們知道 按下鼠標(biāo)然后拖拽可以選擇文字 的链蕊。
清除選中的內(nèi)容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
- 滾動條
思路：鼠標(biāo)按下之后拖動，用鼠標(biāo)位置減去小盒子的左邊位置得出大盒子距離左側(cè)位置谬泌，在用鼠標(biāo)位置減去大盒子距離左邊位置滔韵，鼠標(biāo)事件觸發(fā)后移動。
function $(id) {
return document.getElementById(id);
}
var two = $("one").children[0];
two.onmousedown = function(event){
var event = event || window.event;
var lefta = event.clientX - this.offsetLeft;
var that = this;
document.onmousemove = function(event){ //document寫成two
var event = event || window.event;
that.style.left = event.clientX - lefta+"px";//忘記加px
var val = parseInt(that.style.left);
// alert(val);
if (val < 0) {
that.style.left = "0px";
}
else if (val > 490) {
that.style.left = "490px";
}
$("three").style.width = that.style.left;
$("span").innerHTML = "已經(jīng)走了"+parseInt(parseInt(that.style.left)/($("one").offsetWidth-$("two").offsetWidth) * 100)+"%";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function(event){
document.onmousemove = null;
}
}
