jQuery實現點擊圖標div循環放大縮小功能

時間 2019-12-04

標籤 jquery 實現點擊圖標 div 循環放大縮小功能欄目 JQuery 简体版

原文原文鏈接

很基礎的一個功能，點擊左下角的圖標按鈕，地圖的整個div會變大，變大預覽以後，再次點擊圖標按鈕，地圖的整個div會變小，恢復原樣，兩個圖標在地圖界面的放大和縮小時間不斷的切換圖標狀態（箭頭向裏面，或者箭頭向外面）css

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <style>
            #scale {
                background: #FFFFFF url('../img/suo.png') no-repeat scroll 0px 0px;
                background-position: center center;
                position: absolute;
                left: 3%;
                bottom: 40%;
                width: 26px;
                height: 26px;
            }
            
            #scale.current {
                background: #FFFFFF url("../img/fang.png") no-repeat scroll 0px 0px;
                background-position: center center;
            }
            
            #updmap {
                border: 1px solid #1E90FF;
                width: 400px;
                height: 200px
            }
        </style>
    </head>

    <body>
        <div id="scale" style=""></div>
        <div id="updmap">
            
        </div>
    </body>
    <script>
        $("#scale").toggle(function() {
            $(this).toggleClass("current");
            $("#updmap").css({
                "width": "950px",
                "height": "400px",

            });

        }, function() {
            $(this).toggleClass("current");
            $("#updmap").css({

                "width": "400px",
                "height": "200px",

            });

        });
    </script>

</html>

原文做者：祈澈姑娘
技術博客：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛編程，愛運營，愛折騰。
堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。html

相關標籤/搜索