A very basic function, click the icon button in the lower left corner, the whole div of the map will become larger. After the preview becomes larger, click the icon button again, the whole div of the map will become smaller and return to its original state. The two icons constantly switch the icon state (arrow inside or arrow outside) in the enlargement and reduction time of the map interface
Picture.png
Picture.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>
Original author: miss qiche
Technology blog: https://www.jianshu.com/u/05f416aefbe1
Post-90s front-end girls, love programming, love operation, love tossing.
Insist on summarizing the technical problems encountered in the work and recording what you think and see in the work. Welcome to discuss and exchange together.