很基础的一个功能，点击左下角的图标按钮，地图的整个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. JS取出特定字符前后的字符串，针对一串字符里面的单个字符前后的字符串

    //针对一串自负里面的单个字符前后的字符串<!doctype html> <html> <head> <meta charset="utf-8&qu ...

  2. 树莓派（Raspberry Pi）：完美的家用服务器

    出处:http://linux.cn/thread/11884/1/1/ 树莓派(Raspberry Pi):完美的家用服务器 自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和 ...

  3. HDU-5534 Partial Tree 完全背包 设定初始选择

    题目链接:https://cn.vjudge.net/problem/HDU-5534 题意 放学路上看到n个节点,突然想把这几个节点连成一颗树. 树上每个节点有一个清凉度,清凉度是一个关于节点度的函 ...

  4. s5pv210 fimc 之 fimc-dev.c

    fimc-dev.c 是Samsung FIMC 设备的V4L2 驱动.上层应用直接操作这个设备,进行capture,图片处理,以及overlay输出 http://blog.csdn.net/cxw ...

  5. 紫书 例题8-3 UVa 1152（中途相遇法）

    这道题要逆向思维, 就是求出答案的一部分, 然后反过去去寻找答案存不存在. 其实很多其他题都用了这道题目的方法, 自己以前都没有发现, 这道题专门考这个方法.这个方法可以没有一直往下求, 可以省去很多 ...

  6. leetcode第一刷_Subsets II

    要求子集,有很现成的方法.N个数.子集的个数是2^N.每一个元素都有在集合中和不在集合中两种状态,这些状态用[0,pow(2,N)]中每一个数来穷举,假设这个数中的第i位为1,说明当前集合中包括源数组 ...

  7. 深搜解Riding the Fences

    Riding the Fences Farmer John owns a large number of fences that must be repairedannually. He traver ...

  8. MongoDB 系列(二) C# 内嵌元素操作 聚合使用

    "_id" : "639d8a50-7864-458f-9a7d-b72647a3d226","ParentGuid" : "00 ...

  9. 移动端 input光标问题 以及 监听输入

    1.  input 框光标问题: input框 在ios上显示的与Android是不一样的 显示是这样的 而且在输入的时候 光标位置变化了 是这样的 为了达到一致的效果 在行高加上\9     如:l ...

  10. Kettle学习系列之Kettle的起源

    不多说,直接上干货! Kettle起源于十年以前,本世纪初.当时啊,ETL工具千姿百态,比较流行的工具有50个左右,ETL框架数量比工具还要多些. 根据这些工具的各自起源和功能可以分为以下4种类型,如 ...