快捷導航

JavaScript實現(xiàn)點擊改變圖片形狀(transform應(yīng)用)

更新時間：2021年04月29日 14:12:25 作者：知識進腦的肖老千啊

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊改變圖片形狀，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript之點擊改變圖片形狀（transform的應(yīng)用），供大家參考，具體內(nèi)容如下

附上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform的運用</title>
    <style type="text/css">
        #box{
            width: 50px;
            height: 50px;
            background-color: red;
            /*traslate 位移  rotate 旋轉(zhuǎn)幅度   scale 放大幅度   skew傾斜*/
            /*transform: translate(100px,200px) rotate(20deg) scale(2.0) skew(10deg);*/
        }
    </style>
</head>
<body>
    <button id="btn">形變</button>
    <div id="box"></div>
    <script>
        window.onload = function (){
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            var index = 0;
            btn.onclick = function (){
                index++;
                box.style.transform = `translate(${index*100}px,${index*50}px) rotate(${index*10}deg) scale(${index*1.3})`;
            }
        }
    </script>
</body>
</html>

實現(xiàn)效果圖：

默認原始情況下：

點擊形變后：

再次點擊則會繼續(xù)發(fā)生變化。

下邊對transform的應(yīng)用進行擴展，運用于時鐘的走動：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數(shù)字時鐘案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            background: url("img/clock.jpg") no-repeat;
            position: relative;
        }
        #hour,#minute,#second{
            position: absolute;
            width: 30px;
            height: 600px;
            left: 50%;
            margin-left: -15px;
        }
        #hour{
            background: url("img/hour.png") no-repeat;
        }
        #minute{
            background: url("img/minute.png") no-repeat;
        }
        #second{
            background: url("img/second.png") no-repeat;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        // 1.獲取標簽
        var hour = document.getElementById("hour");
        var minute = document.getElementById("minute");
        var second = document.getElementById("second");

        // 2.開啟定時器 獲取當前時間
        setInterval(function (){
            // 2.1獲取當前的時間戳
            var now = new Date();
            // 2.2獲取小時 分鐘 秒
            var s = now.getSeconds();
            var m = now.getMinutes() + s/60;
            var h = now.getHours()%12 + m/60;

            // 2.3旋轉(zhuǎn)
            second.style.transform = `rotate(${s*6}deg)`;
            minute.style.transform = `rotate(${m*6}deg)`;
            hour.style.transform = `rotate(${h*30}deg)`;
        },10)
    </script>
</body>
</html>

附上效果圖（現(xiàn)在是八點零一）：