整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何實現前端CSS-3D交互，跟隨鼠標3D旋轉。
這期視頻分享一個三D卡片的交互效果。圖片會在鼠標滑入后跟隨鼠標進行三D旋轉。
要讓卡片進行3D旋轉，需要使用騰騰、rotate以及透視視劇perspective卡片。3D旋轉效果只需要rotatex和rotatey的旋轉就可以了。
通常情況下透視數據p2x的取值為五百px左右，這里設置為五百px。然后修改旋轉xy的詞，發現靜態效果可以呈現出來。如何跟隨鼠標？就需要監聽鼠標滑入、滑動、滑出事件。
首先需要給滑動設置一個確定旋轉范圍，然后在鼠標移動監聽的時候進行計算。計算公式非常常見，就不再贅述。
最后把值復制給旋轉的xy，通過css變量的方式進行復制。然后在鼠標滑出的時候再把旋轉的xy復制為零，就實現了這個功能。
插入滑出的時候沒有過渡效果，比較生硬。可以加上過渡效果，但是因為旋轉的xy值修改的頻率太高了，過渡效果會有延遲。而且d bug看日志的時候還會卡的不行。也可以僅在鼠標滑出的時候增加過渡效果，這樣在鼠標離開的時候就有過渡效果了。
但是鼠標滑入的時候還是會比較生硬，因為會接著跟鼠標旋轉，所以體驗還好。如果有小伙伴知道在反復去掉過渡效果的情況下滑入，如何處理過渡效果，歡迎在評論區進行討論。那么這期視頻就到這里結束了，喜歡的小伙伴可以幫忙點點贊，感謝大家的觀看，拜拜。
總算是寫完了基礎類型篇的內容。這次咱們來聊一聊動畫。
閑話就不多扯了，直接開始正文。
一、基礎概念
JavaScript中，我們可以依賴內部提供的動畫函數，去移動DOM元素（<img />，<div>或任何其他HTML元素）。
JavaScript提供了以下兩個在動畫中經常使用的函數。
JavaScript還可以設置DOM對象的許多屬性，包括它在屏幕上的位置。我們也可以設置對象的頂部和左側屬性，以將其放置在屏幕上的任何位置：
二、Manual Animation
接下來，讓我們使用DOM對象屬性和JavaScript函數實現一個簡單的動畫，上代碼：
代碼很簡單，這里簡單解釋一下，當然能看懂的朋友，可以跳過啦：
PS：供復制的代碼，但是請注意，圖片資源需要調整一下
<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中，我們看到了每次單擊時圖像如何向右移動（PS：運行起來的效果）。
接下來我們使用JavaScript的setTimeout()來自動執行此過程，看代碼：
同樣，簡單的解釋一番（大佬略過~）：
PS：供復制的代碼，但是請注意，圖片資源需要調整一下
<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>
三、鼠標滑過
這是一個很常見的效果，就是鼠標滑入某個元素，然后做動畫。上代碼：
再解釋一波（同樣大佬略過）：
PS：供復制的代碼，但是請注意，圖片資源需要調整一下
<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>
關于動畫篇的內容，到此就結束了。邊翻譯邊總結還真有點強行雜糅到一起的感覺?？赡苓€是自己功力不足吧。
希望以后的文章可以，更絲滑一些，哈哈~
文要介紹的是一種鼠標從一個元素移入移出時，獲取鼠標移動方向的思路。這個方法可以幫助你判斷鼠標在移入移出時，是從上下左右的哪個方向發生的。這個思路，是我自己琢磨出來，利用了一點曾經高中學過的數學知識，但是非常簡單好理解，希望能對你有所幫助。
在線demo：
相關代碼：
另外demo1.html里面還有部分邏輯代碼。
效果演示：
1. 把元素框分成如下四部分：
只要能判斷出鼠標移入移出時屬于哪個部分的范圍內，問題即可解決。而這個判斷可通過斜率，結合鼠標的位置與元素框中心點的位置比較得出。這個判斷原理，采用下面的坐標系圖解來說明。
2. 解決這個問題，建立如下圖坐標系：
1）上圖以瀏覽器可視區域左上角為原點建立坐標系，坐標系與數學坐標系方向一致，往右表示x軸正方向，往下表示y軸負方向；
2）圖中點(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心點，（x,y）表示鼠標移入移出時與元素框的邊的交點；
3）根據下面的公式：
可得(x1,y1)與（x4,y4)這條對角線的斜率為 k = (y1-y4)/(x1-x4)。由于對稱性，元素框另外一條對角線的斜率一定是 -k。
同時由于(x1,y1)與（x4,y4)這條對角線在坐標系中一定經過的是第二和第四象限，所以k肯定是負值，而 -k一定是正值。
4）根據同樣的公式，當鼠標移入移出時的瞬間，與元素邊框的交點與元素框中心點的斜率 k1 = (y-y0)/(x-x0)。
5）由圖可知，當 k < k1 < –k時，鼠標一定是從元素的左右方向移動的；反之，一定是從上下方向移動的。
當鼠標是從左右方向移動時，如果x > x0，那么鼠標就是從右邊移動的，反之就是從左邊移動的；
當鼠標是從上下方向移動時，如果y > y0時，那么鼠標就是從上邊移動的，反之就是從下邊移動的。
注意：坐標系中所有的y值都是負的。
以上便是這個問題，我提供的解決思路，通過上面的圖解說明，相信大家理解起來會比較容易。如果查看我提供的代碼實現demo1.js，會發現代碼的邏輯，跟上面的圖解說明也是一致的。當然這個思路只是解決如何判斷鼠標移入移出的方向問題，demo中的效果實現最后還得要借助css 過渡才行，不過這個部分就更簡單了，詳細代碼可見demo1.html的源碼，邏輯非常簡單，這里就不再詳細說明了。
在得出上面的思路之前，我其實已經在網上了解到另外一個思路實現了，我把該實現也做了一個demo：
代碼：
當然這兩個demo，從效果上沒有任何區別，它們的區別僅僅在于鼠標移動方向判斷的算法不同而已。這個算法可以在demo2.js中找到，你也可以通過下面的兩篇文章了解到它的一些介紹：
不過慚愧的是，我并沒有看懂這個思路的原理，所以我這里也給不出解釋說明了，雖然在別的地方看到了一些解釋，但是并不是很清晰，所以我才去想有沒有更簡單理解的方法實現。實際工作中，我認為這兩種思路都是可以使用的，用哪個憑自己喜好決定就行了。
最后希望本文提供的這個小東西在你平常工作的時候，能夠派上用場，為你的頁面添加一些活潑的滑入滑出效果等等，同時也算是自己的一個積累。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
