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

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

很基础的一个功能,点击左下角的图标按钮,地图的整个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>
相关文章
|
7月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
7月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
7月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
64 0
|
7月前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
|
28天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
33 5
|
4月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
28 1
|
4月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
23 1
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
48 0
|
6月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
51 0
|
7月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?