zoukankan      html  css  js  c++  java
  • jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面)

    5640239-51ac018f390174d7.png
    图片.png
    5640239-2ed4679dc570a6ce.png
    图片.png
    <!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%;
                     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;
                     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后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 相关阅读:
    centos7下安装Jdk8、Tomcat8
    CentOS7.3下使用YUM安装MySQL5.6
    数据库表直接生成Excel
    分页工具类
    ResponseUtil
    图片上传
    UUIDUtils
    html和js
    java
    Eclipse启动发生的错误An internal error occurred during: "Initializing Java Tooling".
  • 原文地址:https://www.cnblogs.com/ting6/p/9725285.html
Copyright © 2011-2022 走看看