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

<!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后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

jQuery实现点击图标div循环放大缩小功能的更多相关文章

  1. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  2. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  3. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  4. 自定义mousewheel事件，实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  5. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. div定时放大缩小

    <!DOCTYPE html> <html> <head> <style> .anim{ width: 100px; height: 100px; ba ...

  7. JetBrains PyCharm 2017.2 字体放大缩小 功能

  8. 猫猫学IOS（二）UI之button操作 点击变换 移动 放大缩小 旋转

    不多说,先上图片看效果,猫猫分享.必须精品 原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:viewmode=contents">http://blog.csdn.net/u013 ...

  9. AJ学IOS（02）UI之按钮操作 点击变换 移动 放大缩小 旋转

    不多说,先上图片看效果,AJ分享,必须精品 这个小程序主要实现点击方向键可以让图标上下左右动还有放大缩小以及旋转的功能,点击图片会显示另一张图片. 点击变换 其实用到了按钮的两个状态,再State C ...

随机推荐

  1. 小学生都能学会的python(编码 and 字符串)

    小学生都能学会的python(编码 and 字符串) 一,编码 最早的计算机编码是ASCII. 有英文+数字+特殊字符 8bit => 1byte 没有中文, 后面的编码必须兼容ASCII    ...

  2. STM32CubeMx的使用分享

    1. 新建立工程(以F103ZET6为例) 2. 配置引脚(以PA0为例)   3. 配置外设(以串口为例) 4. 配置时钟 5. 外设.GPIO.中断初始化 6. 生成工程 7. 添加自己的代码 8 ...

  3. 题解 CF821D 【Okabe and City】

    其实,这道题不用long long也能AC. 题意是给你一个矩阵,有一些格子被点亮有一些没有,每一次只能在被点亮的格子上面走. 然后你每一次都可以选择点亮一行或一排(非永久),现在问你最少点多少次可以 ...

  4. （转载）maven profile多环境自动切换配置

    原文:https://www.cnblogs.com/adeng/p/7059588.html 痛点: 在java开发的过程中,我们经常要面对各种各样的环境,比如开发环境,测试环境,正式环境,而这些环 ...

  5. POJ——T 3159 Candies

    http://poj.org/problem?id=3159 Time Limit: 1500MS   Memory Limit: 131072K Total Submissions: 33328   ...

  6. [AngularJS]Chapter 4 AngularJS程序案例分析

    前边讲的都是基础.本章看看他们怎么合作的. 我们要建一个程序.一次一步.章末结束 [这个程序] GutHub是一个简单的菜谱管理程序.功能是存好吃的的菜谱并提供步骤.这个程序包含: 两列布局 左边是导 ...

  7. MapReduce运行流程具体解释

    在hadoop中.每一个mapreduce任务都会被初始化为一个Job. 每一个Job又能够分为两个阶段:map阶段和reduce阶段.这两个阶段分别用两个函数来表示,即map函数和reduce函数. ...

  8. lscript.ld 链接器脚本

    sumary选项卡 lscript.ld是这个应用程序的链接器脚本. 这是实用的作为一个报告 看看内存是针相应用程序. 它也能够被编辑以改变应用程序的位置.双击Hello_Zynqàsrcà lscr ...

  9. apiCloud中Frame框的操作，显示与隐藏Frame

    Frame是一层一层的概念, 有的位于上层,有的位于下层. 1.加载菜单 2.加载页面层 3.首页拆分出内容层,这个时候内容层位于页面层的上方,当点击其他页面的时候,内容层遮挡住了他们 解决方案一 判 ...

  10. vue 组件来回切换时 记住上一个组件滚动位置(keep-alive）

    记住组件滚动状态: 使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度.这个时候需要keep-alive配合. 方法一:如下情况导航在做普遍用法.前提是使用keep-a ...