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>
原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
jQuery实现点击图标div循环放大缩小功能的更多相关文章
- 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- jquery实现点击控制div的显示和隐藏
我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 自定义mousewheel事件，实现图片放大缩小功能实现
本文是承接 上一篇的<自定义鼠标滚动事件> 的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...
- JS实现用键盘控制DIV上下左右+放大缩小与变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div定时放大缩小
<!DOCTYPE html> <html> <head> <style> .anim{ width: 100px; height: 100px; ba ...
- JetBrains PyCharm 2017.2 字体放大缩小 功能
- 猫猫学IOS（二）UI之button操作 点击变换 移动 放大缩小 旋转
不多说,先上图片看效果,猫猫分享.必须精品 原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:viewmode=contents">http://blog.csdn.net/u013 ...
- AJ学IOS（02）UI之按钮操作 点击变换 移动 放大缩小 旋转
不多说,先上图片看效果,AJ分享,必须精品 这个小程序主要实现点击方向键可以让图标上下左右动还有放大缩小以及旋转的功能,点击图片会显示另一张图片. 点击变换 其实用到了按钮的两个状态,再State C ...
随机推荐
- vertical-align到底是个啥
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align http://phrogz.net/css/vertical-align ...
- Vue组件之作用域插槽
写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...
- Link Cut Tree 动态树 小结
动态树有些类似 树链剖分+并查集 的思想,是用splay维护的 lct的根是动态的,"轻重链"也是动态的,所以并没有真正的轻重链 动态树的操作核心是把你要把 修改/询问/... 等 ...
- 紫书 例题7-14 UVa 1602（搜索+STL+打表）
这道题想了很久不知道怎么设置状态,怎么拓展,怎么判重, 最后看了这哥们的博客 终于明白了. https://blog.csdn.net/u014800748/article/details/47400 ...
- ACdream 1157 Segments
Segments Time Limit: 2000ms Memory Limit: 10000KB This problem will be judged on ACdream. Original I ...
- 2015 Multi-University Training Contest 7 hdu 5375 Gray code
Gray code Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- [CSS3] Image Width with sizes (srcset & sizes)
What if the image won't be displayed at the full viewport width? Then you need something more than s ...
- 2 怎样解析XML文件或字符串
1 引用XML文件 2 使用XMLReader解析文本字符串 3 使用XMLReader方法读取XML数据 详细代码实现例如以下: //初始化一个XML字符串 String xmlString = @ ...
- TRIZ系列-创新原理-34-抛弃和再生部件原理
抛弃和再生部件原理的详细描写叙述例如以下:1)物件的部件在完毕其功能,或者变得没用之后,就被扔掉(丢弃.溶解,挥发等),或者在工作过程已经改变.2)物体已经用掉的部件,应该在工作期间恢复: 对于抛弃原 ...
- Linux内核编译測试
内核编译: Step 1:配置内核编译选项. make menuconfig Optional Step :排除编译结果文件(.o)等之间的依赖性. make mrproper Optional St ...