整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
何實(shí)現(xiàn)前端CSS-3D交互，跟隨鼠標(biāo)3D旋轉(zhuǎn)。
這期視頻分享一個(gè)三D卡片的交互效果。圖片會(huì)在鼠標(biāo)滑入后跟隨鼠標(biāo)進(jìn)行三D旋轉(zhuǎn)。
要讓卡片進(jìn)行3D旋轉(zhuǎn)，需要使用騰騰、rotate以及透視視劇perspective卡片。3D旋轉(zhuǎn)效果只需要rotatex和rotatey的旋轉(zhuǎn)就可以了。
通常情況下透視數(shù)據(jù)p2x的取值為五百px左右，這里設(shè)置為五百px。然后修改旋轉(zhuǎn)xy的詞，發(fā)現(xiàn)靜態(tài)效果可以呈現(xiàn)出來。如何跟隨鼠標(biāo)？就需要監(jiān)聽鼠標(biāo)滑入、滑動(dòng)、滑出事件。
首先需要給滑動(dòng)設(shè)置一個(gè)確定旋轉(zhuǎn)范圍，然后在鼠標(biāo)移動(dòng)監(jiān)聽的時(shí)候進(jìn)行計(jì)算。計(jì)算公式非常常見，就不再贅述。
最后把值復(fù)制給旋轉(zhuǎn)的xy，通過css變量的方式進(jìn)行復(fù)制。然后在鼠標(biāo)滑出的時(shí)候再把旋轉(zhuǎn)的xy復(fù)制為零，就實(shí)現(xiàn)了這個(gè)功能。
插入滑出的時(shí)候沒有過渡效果，比較生硬。可以加上過渡效果，但是因?yàn)樾D(zhuǎn)的xy值修改的頻率太高了，過渡效果會(huì)有延遲。而且d bug看日志的時(shí)候還會(huì)卡的不行。也可以僅在鼠標(biāo)滑出的時(shí)候增加過渡效果，這樣在鼠標(biāo)離開的時(shí)候就有過渡效果了。
但是鼠標(biāo)滑入的時(shí)候還是會(huì)比較生硬，因?yàn)闀?huì)接著跟鼠標(biāo)旋轉(zhuǎn)，所以體驗(yàn)還好。如果有小伙伴知道在反復(fù)去掉過渡效果的情況下滑入，如何處理過渡效果，歡迎在評(píng)論區(qū)進(jìn)行討論。那么這期視頻就到這里結(jié)束了，喜歡的小伙伴可以幫忙點(diǎn)點(diǎn)贊，感謝大家的觀看，拜拜。
總算是寫完了基礎(chǔ)類型篇的內(nèi)容。這次咱們來聊一聊動(dòng)畫。
閑話就不多扯了，直接開始正文。
一、基礎(chǔ)概念
JavaScript中，我們可以依賴內(nèi)部提供的動(dòng)畫函數(shù)，去移動(dòng)DOM元素（<img />，<div>或任何其他HTML元素）。
JavaScript提供了以下兩個(gè)在動(dòng)畫中經(jīng)常使用的函數(shù)。
JavaScript還可以設(shè)置DOM對(duì)象的許多屬性，包括它在屏幕上的位置。我們也可以設(shè)置對(duì)象的頂部和左側(cè)屬性，以將其放置在屏幕上的任何位置：
二、Manual Animation
接下來，讓我們使用DOM對(duì)象屬性和JavaScript函數(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫，上代碼：
代碼很簡(jiǎn)單，這里簡(jiǎn)單解釋一下，當(dāng)然能看懂的朋友，可以跳過啦：
PS：供復(fù)制的代碼，但是請(qǐng)注意，圖片資源需要調(diào)整一下
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>
三、Automated Animation
在上面的demo中，我們看到了每次單擊時(shí)圖像如何向右移動(dòng)（PS：運(yùn)行起來的效果）。
接下來我們使用JavaScript的setTimeout()來自動(dòng)執(zhí)行此過程，看代碼：
同樣，簡(jiǎn)單的解釋一番（大佬略過~）：
PS：供復(fù)制的代碼，但是請(qǐng)注意，圖片資源需要調(diào)整一下
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>
三、鼠標(biāo)滑過
這是一個(gè)很常見的效果，就是鼠標(biāo)滑入某個(gè)元素，然后做動(dòng)畫。上代碼：
再解釋一波（同樣大佬略過）：
PS：供復(fù)制的代碼，但是請(qǐng)注意，圖片資源需要調(diào)整一下
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>
關(guān)于動(dòng)畫篇的內(nèi)容，到此就結(jié)束了。邊翻譯邊總結(jié)還真有點(diǎn)強(qiáng)行雜糅到一起的感覺。可能還是自己功力不足吧。
希望以后的文章可以，更絲滑一些，哈哈~
文要介紹的是一種鼠標(biāo)從一個(gè)元素移入移出時(shí)，獲取鼠標(biāo)移動(dòng)方向的思路。這個(gè)方法可以幫助你判斷鼠標(biāo)在移入移出時(shí)，是從上下左右的哪個(gè)方向發(fā)生的。這個(gè)思路，是我自己琢磨出來，利用了一點(diǎn)曾經(jīng)高中學(xué)過的數(shù)學(xué)知識(shí)，但是非常簡(jiǎn)單好理解，希望能對(duì)你有所幫助。
在線demo：
相關(guān)代碼：
另外demo1.html里面還有部分邏輯代碼。
效果演示：
1. 把元素框分成如下四部分：
只要能判斷出鼠標(biāo)移入移出時(shí)屬于哪個(gè)部分的范圍內(nèi)，問題即可解決。而這個(gè)判斷可通過斜率，結(jié)合鼠標(biāo)的位置與元素框中心點(diǎn)的位置比較得出。這個(gè)判斷原理，采用下面的坐標(biāo)系圖解來說明。
2. 解決這個(gè)問題，建立如下圖坐標(biāo)系：
1）上圖以瀏覽器可視區(qū)域左上角為原點(diǎn)建立坐標(biāo)系，坐標(biāo)系與數(shù)學(xué)坐標(biāo)系方向一致，往右表示x軸正方向，往下表示y軸負(fù)方向；
2）圖中點(diǎn)(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心點(diǎn)，（x,y）表示鼠標(biāo)移入移出時(shí)與元素框的邊的交點(diǎn)；
3）根據(jù)下面的公式：
可得(x1,y1)與（x4,y4)這條對(duì)角線的斜率為 k = (y1-y4)/(x1-x4)。由于對(duì)稱性，元素框另外一條對(duì)角線的斜率一定是 -k。
同時(shí)由于(x1,y1)與（x4,y4)這條對(duì)角線在坐標(biāo)系中一定經(jīng)過的是第二和第四象限，所以k肯定是負(fù)值，而 -k一定是正值。
4）根據(jù)同樣的公式，當(dāng)鼠標(biāo)移入移出時(shí)的瞬間，與元素邊框的交點(diǎn)與元素框中心點(diǎn)的斜率 k1 = (y-y0)/(x-x0)。
5）由圖可知，當(dāng) k < k1 < –k時(shí)，鼠標(biāo)一定是從元素的左右方向移動(dòng)的；反之，一定是從上下方向移動(dòng)的。
當(dāng)鼠標(biāo)是從左右方向移動(dòng)時(shí)，如果x > x0，那么鼠標(biāo)就是從右邊移動(dòng)的，反之就是從左邊移動(dòng)的；
當(dāng)鼠標(biāo)是從上下方向移動(dòng)時(shí)，如果y > y0時(shí)，那么鼠標(biāo)就是從上邊移動(dòng)的，反之就是從下邊移動(dòng)的。
注意：坐標(biāo)系中所有的y值都是負(fù)的。
以上便是這個(gè)問題，我提供的解決思路，通過上面的圖解說明，相信大家理解起來會(huì)比較容易。如果查看我提供的代碼實(shí)現(xiàn)demo1.js，會(huì)發(fā)現(xiàn)代碼的邏輯，跟上面的圖解說明也是一致的。當(dāng)然這個(gè)思路只是解決如何判斷鼠標(biāo)移入移出的方向問題，demo中的效果實(shí)現(xiàn)最后還得要借助css 過渡才行，不過這個(gè)部分就更簡(jiǎn)單了，詳細(xì)代碼可見demo1.html的源碼，邏輯非常簡(jiǎn)單，這里就不再詳細(xì)說明了。
在得出上面的思路之前，我其實(shí)已經(jīng)在網(wǎng)上了解到另外一個(gè)思路實(shí)現(xiàn)了，我把該實(shí)現(xiàn)也做了一個(gè)demo：
代碼：
當(dāng)然這兩個(gè)demo，從效果上沒有任何區(qū)別，它們的區(qū)別僅僅在于鼠標(biāo)移動(dòng)方向判斷的算法不同而已。這個(gè)算法可以在demo2.js中找到，你也可以通過下面的兩篇文章了解到它的一些介紹：
不過慚愧的是，我并沒有看懂這個(gè)思路的原理，所以我這里也給不出解釋說明了，雖然在別的地方看到了一些解釋，但是并不是很清晰，所以我才去想有沒有更簡(jiǎn)單理解的方法實(shí)現(xiàn)。實(shí)際工作中，我認(rèn)為這兩種思路都是可以使用的，用哪個(gè)憑自己喜好決定就行了。
最后希望本文提供的這個(gè)小東西在你平常工作的時(shí)候，能夠派上用場(chǎng)，為你的頁面添加一些活潑的滑入滑出效果等等，同時(shí)也算是自己的一個(gè)積累。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
