很基础的一个功能, 点击左下角的图标按钮, 地图的整个 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>
总结
以上所述是小编给大家介绍的 jQuery 实现点击图标 div 循环放大缩小功能, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/148275.htm