整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端CSS-3D交互,跟隨鼠標3D旋轉

          何實現前端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提供了以下兩個在動畫中經常使用的函數。

          • setTimeout(function,duration) - 此函數從現在起持續幾毫秒后調用函數。
          • setInterval(function,duration) - 該函數在每個持續時間毫秒后調用函數。
          • clearTimeout(setTimeout_variable) - 此函數調用清除setTimeout()函數設置的任何計時器。

          JavaScript還可以設置DOM對象的許多屬性,包括它在屏幕上的位置。我們也可以設置對象的頂部和左側屬性,以將其放置在屏幕上的任何位置:

          二、Manual Animation

          接下來,讓我們使用DOM對象屬性和JavaScript函數實現一個簡單的動畫,上代碼:

          代碼很簡單,這里簡單解釋一下,當然能看懂的朋友,可以跳過啦:

          • 我們使用JavaScript函數getElementById()來獲取DOM對象,然后將其分配給全局變量imgObj。
          • 我們已經定義了一個初始化函數init()來初始化imgObj,我們已經設置了它的位置和左邊的屬性。
          • 我們在窗口加載時調用初始化函數。
          • 最后,我們調用moveRight()函數將左邊距離增加10個像素。也可以將其設置為負值,將其移動到左側。

          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()來自動執行此過程,看代碼:

          同樣,簡單的解釋一番(大佬略過~):

          • 所述MoveRight的()函數是調用的setTimeout()函數來設置的位置imgObj。
          • 我們添加了一個新函數stop()來清除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>
          

          三、鼠標滑過

          這是一個很常見的效果,就是鼠標滑入某個元素,然后做動畫。上代碼:

          再解釋一波(同樣大佬略過):

          • 在加載此頁面時,“if”語句檢查圖像對象是否存在。如果圖像對象不可用,則不會執行此塊。
          • Image()構造函數創建并預加載稱為新的圖像對象image1的。
          • 為src屬性分配名為/images/html.gif的外部圖像文件的名稱。
          • 同樣,我們在此對象中創建了image2對象并分配了/images/http.gif。
          • #(哈希標記)禁用鏈接,以便瀏覽器在單擊時不會嘗試轉到URL。此鏈接是圖像。
          • 所述的onMouseOver當用戶的鼠標移動到鏈路,而觸發事件處理程序的onMouseOut事件處理程序,當用戶的鼠標從鏈路(圖像)移開被觸發。
          • 當鼠標在圖像上移動時,圖像從第一個圖像變為第二個圖像。當鼠標遠離圖像時,將顯示原始圖像。
          • 當鼠標遠離鏈接時,初始圖像html.gif將重新出現在屏幕上。

          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中找到,你也可以通過下面的兩篇文章了解到它的一些介紹:

          不過慚愧的是,我并沒有看懂這個思路的原理,所以我這里也給不出解釋說明了,雖然在別的地方看到了一些解釋,但是并不是很清晰,所以我才去想有沒有更簡單理解的方法實現。實際工作中,我認為這兩種思路都是可以使用的,用哪個憑自己喜好決定就行了。

          總結

          最后希望本文提供的這個小東西在你平常工作的時候,能夠派上用場,為你的頁面添加一些活潑的滑入滑出效果等等,同時也算是自己的一個積累。


          主站蜘蛛池模板: 久久久久国产一区二区| 国产SUV精品一区二区88L| 国内自拍视频一区二区三区| 精品成人av一区二区三区| 无码国产精品一区二区免费| 丰满爆乳一区二区三区| 91在线一区二区| 日韩AV片无码一区二区不卡| 国产欧美色一区二区三区| 日韩十八禁一区二区久久| 中文字幕Av一区乱码| 中文字幕AV一区二区三区| 极品少妇伦理一区二区| 日韩视频免费一区二区三区| 中文字幕日本一区| 人妻互换精品一区二区| 99精品国产一区二区三区| 国产av一区二区精品久久凹凸 | 日韩人妻无码免费视频一区二区三区| 亚洲色精品vr一区二区三区| 亚洲毛片αv无线播放一区| 日本不卡一区二区三区| 无码人妻啪啪一区二区| 亚洲AV成人一区二区三区观看 | 无码人妻久久一区二区三区蜜桃| 国产精华液一区二区区别大吗| 无码人妻一区二区三区精品视频| 亚洲AV乱码一区二区三区林ゆな| 麻豆AV一区二区三区| 少妇精品无码一区二区三区| 精品乱码一区二区三区在线| 国产精品综合一区二区| 无码人妻精品一区二区蜜桃百度| 国产福利电影一区二区三区,亚洲国模精品一区 | 精品无码日韩一区二区三区不卡| 精品视频一区在线观看| 精品无码人妻一区二区三区品| 久久久无码一区二区三区| 亚洲一区二区三区写真 | 亚洲成在人天堂一区二区| 亚洲字幕AV一区二区三区四区|