2. 程式人生 > 程式設計 >JS實現動畫中的佈局轉換

JS實現動畫中的佈局轉換

阿新 • • 發佈：2021-08-23

在用編寫動畫的時候，經常用會到佈局轉換，即在運動前將相對定位轉為絕對定位，然後執行動畫函式。下面給大家分享一個運用原生JS實現的佈局轉換的Demo，效果如下:

JS實現動畫中的佈局轉換

以下是程式碼實現，歡迎大家複製貼上及吐槽。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實現動畫中的佈局轉換</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #ul1 {
            width: 366px;
            margin: 0 auto;
            position: relative;
        }
 
        #ul1 liwww.cppcns.com
 
 {
            list-style: none;
            width: 100px;
            height: 100px;
            background: #CCC;
            border: 1px solid black;
            float: left;
            margin: 10px;
            z-index: 1;
        }
    </style>
    <!-- 運動框架 -->
    <script>
        // 獲取指定樣式的值
        function getStyle(obj,attr) {
       http://www.cppcns.com
 
     if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj,false)[attr];
            }
        };
        // 運動函式
        function startMove(obj,json,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true;
                for (var attr in json) {
                    var iCur = 0;
                    if (attr == 'opacity') {
                        iCur = parseInt(parseFloat(getStyle(obj,attr)) * 100);
                    } else {
                        iCur = parseInt(getStyle(obj,attr));
                    }
http://www.cppcns.com
 
                    var iSpeed = (json[attr] - iCur) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (iCur != json[attr]) {
                        bStop = false;
                    }
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }
 
                if (bStop) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            },30)
        }
    </script>
    <!-- 新增事件 -->
    <script>
        window.onload = function () {
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var iMinZindex = 2;
            var i = 0;
 
            //www.cppcns.com 1.佈局轉換
            for (i = 0; i < aLi.length; i++) {
                //aLi[i].innerHTML='left:'+aLi[i].offsetLeft+',top:'+aLi[i].offsetTop;
                aLi[i].style.left = aLi[i].offsetLeft + 'px';
www.cppcns.com                aLi[i].style.top = aLi[i].offsetTop + 'px';
            }
 
            // 必需要用兩個迴圈
            for (i = 0; i < aLi.length; i++) {
                aLi[i].style.position = 'absolute';
                //第一次迴圈中offset值已經計算了原有的margin值，所以此處要清除
                aLi[i].style.margin = '0';
            }
 
            // 2.加事件
            for (i = 0; i < aLi.length; i++) {
 
                aLi[i].onmouseover = function () {
                    //讓當前zIndex不斷的增加，防止堆疊
                    this.style.zIndex = iMinZindex++;
                    startMove(this,{
                        width: 200,height: 200,marginLeft: -50,marginTop: -50
                    });
                };
 
                aLi[i].onmouseout = function () {
                    startMove(this,{
                        width: 100,height: 100,marginLeft: 0,marginTop: 0
                    });
                };
            }
        };
    </script>
 
</head>
 
<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

JS實現動畫中的佈局轉換

在用編寫動畫的時候，經常用會到佈局轉換，即在運動前將相對定位轉為絕對定位，然後執行動畫函式。下面給大家分享一個運用原生JS實現的佈局轉換的Demo，效果如下:

js實現九宮格佈局效果

本文例項為大家分享了js實現九宮格佈局效果的具體程式碼，供大家參考，具體內容如下

vue three.js 結合tween.js 實現動畫過渡

參考地址：https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文件：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md

js 實現顏色值格式轉換 rgb和十六進位制的轉換

參考：mossbaoo~ <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

js實現Element中input元件的部分功能並封裝成元件(例項程式碼)

現在實現的有基礎用法、可清空、密碼框，參考連結：https://element.eleme.cn/#/zh-CN/component/input

JS實現購物車中商品總價計算

js計算購物車中商品總價，供大家參考，具體內容如下 題目要求： 購物車中有若干商品資訊，其中包括商品的名稱、單價、數量，計算購物車www.cppcns.com中商品的總價。

js實現瀑布流佈局（無限載入）

本文例項為大家分享了js實現瀑布流佈局的具體程式碼，供大家參考，具體內容如下

原生js實現動畫函式的封裝及核心原理

原生js實現動畫函式的封裝及核心原理 一、動畫實現原理 核心原理：通過定時器setInterval()不斷移動盒子的位置

JS如何實現網站中PC端和手機端自動識別並跳轉對應的程式碼

1. 程式碼場景： 描述：在專案中，一般我們會使用響應式佈局的方式或者藉助bootstrap等外掛來做響應式的網站。但是根據業務的需求，手機端可能會在功能上精簡很多，我們也會寫兩套程式碼，分別用來實現PC端和手機端

vue中使用vue-print.js實現多頁列印

本文主要介紹了vue專案中使用print.js列印，解決多頁，分頁，列印預覽樣式修改等問題。

JS實現網頁煙花動畫效果

原生js實現放煙花效果，點選滑鼠，然後向四周擴散，最後自由落體效果！最簡單的方法實現！

使用Node.js實現base64和png檔案相互轉換的方法

前天瀏覽技術部落格，看到大廠面試題型中有使用nodejs實現base64和圖片檔案相互轉換的例子，剛好近期要開發這個功能，暫時記錄下來，下週開發完成再做一個補充。

JS實現表單中點選小眼睛顯示隱藏密碼框中的密碼

領導交個一個任務，要求在表單中點選小眼睛顯示隱藏密碼框中的密碼！在一些網站中經常會用到這樣的功能，今天小編就給大家分享我的實現思路及程式碼

JS面試題中深拷貝的實現講解

在面試中你是否遇到過如下場景： Q：小朋友，你是否瞭解如何拷貝一個物件？

原生JS實現匯率轉換功能程式碼例項

程式碼如下 html程式碼 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\" />

基於aotu.js實現微信自動新增通訊錄中的聯絡人功能

什麼是Auto.JS？ Auto.JS是Android平臺上的JavaScript自動化工具。 它的本質是可執行自己編寫的簡易Javascript指令碼的，尤其可以在開啟“無障礙模式”的情況下對其他App進行一些操作的一個Android App，便於進行自動

html中map area 熱區自適應的原生js實現方案

在做自適應網頁的時候，如果在圖片中使用了熱區map。圖片可以通過樣式實現：圖片大小隨頁面變化，但是MAP中每個area的座標並不能通過css直接實現自適應。這篇文章就介紹通過原生js來實現：MAP中每個area的座標也隨頁

js實現數字轉換為逗號分隔的格式化字串

//注意：數字與字元的轉換會丟失多餘的尾部0(\'123.010\'<->123.01,\'123.00\'<->123)

js實現盒子移動動畫效果

本文例項為大家分享了js實現盒子移動動畫效果的具體程式碼，供大家參考，具體內容如下

js實現盒子拖拽動畫效果

本文例項為大家分享了js實現盒子拖拽動畫的具體程式碼，供大家參考，具體內容如下