文章有黃楚才嘔心瀝血日川，熬夜做成，轉(zhuǎn)載請(qǐng)著名出處矩乐。
更多知識(shí)點(diǎn)請(qǐng)關(guān)注本人的域名的后期更新huangchucai.cn
裝逼效果提前預(yù)覽龄句，僅限于門外漢看看就關(guān)閉窗口
banner跟隨鼠標(biāo)實(shí)現(xiàn)3d效果
點(diǎn)擊查看完成demo的展示
實(shí)現(xiàn)思路分析
- 監(jiān)聽鼠標(biāo)的移動(dòng)位置
- 計(jì)算出鼠標(biāo)移動(dòng)后距離元素中心點(diǎn)的距離
- 移動(dòng)的距離和3D變換的角度成線性關(guān)系。注意百分比的使用
函數(shù)的e/event對(duì)象
- 函數(shù)自帶一個(gè)e/event對(duì)象散罕，當(dāng)傳入實(shí)參的適合分歇， 其實(shí)是個(gè)e/event對(duì)象傳入一個(gè)參數(shù)。我們通過代碼了來獲取這個(gè)e/event對(duì)象欧漱。
$(document).ready(function(e){
$container=$(".container");
$container.on('click',function(e){
console.log(e);
})
})
我們會(huì)獲得到和距離有關(guān)的幾個(gè)參數(shù)职抡，下面我們一一來講解
e/event對(duì)象的屏幕參數(shù)
以下例子都是click事件下生成
- clientX,clientY 英語(yǔ)翻譯是客戶端的意思。表示鼠標(biāo)點(diǎn)擊的位置距離客戶端的橫縱坐標(biāo)硫椰，不管瀏覽器是否出現(xiàn)滾動(dòng)條繁调，都是表示距離可以看到的頁(yè)面的距離。
- offsetX,offsetY 偏移靶草。表示鼠標(biāo)點(diǎn)擊位置最近的
div的距離蹄胰。只要鼠標(biāo)點(diǎn)擊的位置距離最近元素左上角的橫縱坐標(biāo)。 - pageX,pageY 頁(yè)面奕翔。表示鼠標(biāo)點(diǎn)擊的位置距離頁(yè)面的橫縱坐標(biāo)裕寨，如果頁(yè)面沒有滾動(dòng)條的情況下，
pageX,pageY==clientX,clientY派继。但是當(dāng)頁(yè)面出現(xiàn)滾動(dòng)條的時(shí)候宾袜，就會(huì)有區(qū)別。pageX,pageY始終表示距離頁(yè)面左上角的距離驾窟。 -
screenX,screenY 屏幕庆猫。表示鼠標(biāo)點(diǎn)擊的位置距離屏幕的左上角的橫縱坐標(biāo)。
client和page的區(qū)別
client和page的區(qū)別
client和screen的區(qū)別
jquery獲取父元素相對(duì)于窗口的距離也可以通過原生js實(shí)現(xiàn)
- jquery的offset()方法(有2個(gè)屬性绅络，left,top)
var offset=$container.offset();
var container_x=offset.left;
var container_y=offset.top;
- jquery的width()獲取元素的高度和寬度不包括元素的邊框
var center_x=$container.width();
var center_y=$container.height();
- 我們來通過原生js來獲取元素的高度
-
clientHeight和clientWidth屬性
網(wǎng)頁(yè)上的每個(gè)元素月培，都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺面積恩急，不包括border和滾動(dòng)條占用的空間杉畜。
clientWidth和clientHeight都是只讀屬性，不能對(duì)它們賦值衷恭。
圖解clientHeight和clientWidth屬性-
scrollHeight和scrollWidth屬性
網(wǎng)頁(yè)上的每個(gè)元素還有scrollHeight和scrollWidth屬性此叠，指包含滾動(dòng)條在內(nèi)的該元素的視覺面積。
-
-
- 可以通過
document.body.clientWidthdocument.body.clientHeightdocument.body.scrollWidthdocument.body.scrollHeigh來獲取頁(yè)面寬度和高度随珠，有沒有滾動(dòng)條是關(guān)鍵區(qū)別灭袁，沒有滾動(dòng)條猬错，理論上是相等的 - 獲取元素的位置
- clientleft:元素到邊界的距離，有border屬性的話茸歧，clientleft就是border的值
- scrollleft:滾動(dòng)條到元素邊界的距離
- offsetleft：元素距離父元素的左邊界兔魂，如果父元素沒有設(shè)置position為relation和absolute，就是元素到窗口的距離
offsetleft和offsetTop詳解
首先举娩，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離构罗。其中父元素必須是除了static的其他定位铜涉，否則就是相對(duì)于body
圖解offsetleft和offsetTop
是否有定位很重要
本人研究上訴知識(shí)點(diǎn)的代碼
e/event事件的4個(gè)位置屬性
jquery的width()方法和有滾動(dòng)條的時(shí)候e/event事件的4個(gè)位置屬性的區(qū)別
js原生獲取元素大小和位置
有滾動(dòng)條后的clientWidth和scrollWidth的區(qū)別
代碼中字符串的運(yùn)用
字符串： 可以通過+把元素連接起來，通過引號(hào)和相鄰的元素形成字符串遂唧，例如'deg*-percent_y'+deg中把deg*-percent_y和deg連接起來芙代。
$banner.css({
'transform': 'rotateX('+deg*-percent_y+'deg)'+' rotateY('+percent_x*deg+'deg)'
})
})
