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

2019-11-19 12:48:31

字体：大中小

来源：转载

供稿：网友

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

图片.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>

总结

以上所述是小编给大家介绍的jQuery实现点击图标div循环放大缩小功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：angularJs中orderBy筛选以及filter过滤数据的方法

下一篇：angularJs使用ng-repeat遍历后选中某一个的方法