js特效 - Day3
一、client家族
1.1 clientWidth和clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
1.2 clientLeft和clientTop
clientLeft，clientTop
返回的是元素邊框的borderWidth，
如果不指定一個(gè)邊框或者不定位改元素，其值就為0
1.3 offset、client和scroll的區(qū)別分析
left和top分析：
clientLeft: 左邊邊框的寬度；clientTop: 上邊邊框的寬度
offsetLeft: 當(dāng)前元素距離有定位的父盒子左邊的距離；offsetTop: 當(dāng)前元素距離有定位的父盒子上邊的距離
scrollLeft: 左邊滾動(dòng)的長(zhǎng)度; scrollTop: 上邊滾動(dòng)的長(zhǎng)度;
width和height分析
clientWidth\/Height: 內(nèi)容 + 內(nèi)邊距
offsetWidth\/Height: 內(nèi)容 + 內(nèi)邊距 + 邊框
scrollWidth\/Height: 滾動(dòng)內(nèi)容的寬度和高度
二、獲取屏幕的可視區(qū)域
ie9及其以上的版本、最新瀏覽器
window.innerWidth,window.innerHeight
標(biāo)準(zhǔn)模式瀏覽器
document.documentElement.clientWidth, document.documentElement.clientHeight
怪異模式
document.body.clientWidth, document.body.clientHeight
通用寫法
function client() {
if(window.innerWidth){ // ie9及其以上的版本
return{
width: window.innerWidth,
height:? window.innerHeight
}
}else if(document.compatMode != 'CSS1Compat'){? // 怪異模式
return{
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
// 標(biāo)準(zhǔn)
return{
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
三、常用窗口事件-onresize
當(dāng)窗口或框架的大小發(fā)生改變的時(shí)候就會(huì)調(diào)用；
onresize一般被運(yùn)用于自適應(yīng)頁面布局等多屏幕適配場(chǎng)景；
應(yīng)用：當(dāng)屏幕的寬度>=960時(shí)，頁面的背景顏色為紅色；當(dāng)屏幕的寬度>=640時(shí)，頁面的背景顏色為藍(lán)色；當(dāng)屏幕的寬度<640時(shí)，頁面的背景顏色為綠色？
補(bǔ)充：獲取屏幕的分辨率：window.screen.widthwindow.screen.height
四、JS的事件傳遞機(jī)制
4.1 冒泡機(jī)制
氣泡從水底開始往上升，由深到淺，升到最上面。在上升的過程中，氣泡會(huì)經(jīng)過不同深度層次的水。相對(duì)應(yīng)地：這個(gè)氣泡就相當(dāng)于我們這里的事件，而水則相當(dāng)于我們的整個(gè)dom樹；事件從dom 樹的底層，層層往上傳遞，直至傳遞到dom的根節(jié)點(diǎn)。
IE 6.0:
div -> body -> html -> document
其他瀏覽器:
div -> body -> html -> document -> window
注意：不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
4.2 阻止冒泡的方法
標(biāo)準(zhǔn)瀏覽器 和 ie瀏覽器
w3c：event.stopPropagation()proPagation 傳播 傳遞
IE：event.cancelBubble = truebubble 冒泡 cancel 取消
兼容的寫法
if(event && event.stopPropagation){ // w3c標(biāo)準(zhǔn)
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
4.3 獲取當(dāng)前操作對(duì)象
開發(fā)中，當(dāng)執(zhí)行一個(gè)事件時(shí)需要去知道觸發(fā)這個(gè)事件的對(duì)象是誰？那么，如何獲取：
火狐、谷歌 event.target
ie 678 event.srcElement
一般是獲取這個(gè)對(duì)象的id，兼容的寫法如下：
var targetId = event.target ? event.target.id : event.srcElement.id;
4.4 獲取用戶選中的內(nèi)容
標(biāo)準(zhǔn)瀏覽器
window.getSelection()
ie 獲得選擇的文字
document.selection.createRange().text;
兼容性的寫法
var selectedText;
if(window.getSelection){ // 標(biāo)準(zhǔn)模式 獲取選中的文字
selectedText = window.getSelection().toString();
}else{ // IE 系列
selectedText = document.selection.createRange().text;
}
微博分享
http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + shareText + '&url=https://github.com/xuanzhihua'
五、綜合動(dòng)畫函數(shù)封裝
在開發(fā)過程中，會(huì)接觸到很多動(dòng)畫，比如：幀動(dòng)畫，核心動(dòng)畫，轉(zhuǎn)場(chǎng)動(dòng)畫......，各種復(fù)雜的動(dòng)畫都是由簡(jiǎn)單的動(dòng)畫封裝而成的，那么，動(dòng)畫的基本原理是：盒子的offsetLeft + 步長(zhǎng)。
勻速動(dòng)畫函數(shù)封裝：
// 勻速動(dòng)畫函數(shù)
function animate(obj, target, speed) {
// 1.清除定時(shí)器
clearInterval(obj.timer);
// 2. 判斷方向
var dir = target > obj.offsetLeft ? speed : -speed;
obj.timer? = setInterval(function () {
obj.style.left = obj.offsetLeft + dir + 'px';
// 2.1 清除定時(shí)器 --> offsetLeft == 目標(biāo)值
if (Math.abs(target - obj.offsetLeft) <= speed) {
clearInterval(obj.timer);
// 處理偏差情況
obj.style.left = target + 'px';
}
}, 10)；
}
