专栏首页编程微刊jQuery实现点击图标div循环放大缩小功能

jQuery实现点击图标div循环放大缩小功能

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3 box-shadow 属性

    关于css相关的属性,看似很简单,实际上却蕴含着巨大的潜力,细心组合,学好css之后,能够呈现出一些特别好看的界面哦,尤其像今天所说的CSS3 box-shad...

    王小婷
  • 前端切图:手机端自适应布局demo

    王小婷
  • css实现悬浮效果的阴影

    王小婷
  • 慕课网javascript 进阶篇 第十章 编程练习

    大当家
  • WordPress 添加个性化的博客宠物(妹纸篇)

    某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

    Jeff
  • WordPress 添加个性化的博客宠物(汉纸篇)

    之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

    Jeff
  • 一个搜索条样式,包括select的美化

    一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD X...

    练小习
  • 3D盒子动画

    ---------------------------------------------------------

    py3study
  • 来来来,手把手教你做大白!

    这个东西也是经常被拿来玩的一个小东西,就是通过border-radius 去自己切一个图形。

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券