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 ...
随机推荐
- windows下Word使用-快捷键
1.word全屏显示——Alt+U+V 2.上标——Ctrl+Shift+= 3.下标——Ctrl+=
- JS 将有父子关系的数组转换成树形结构数据
将类似如下数据转换成树形的数据 [{ id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', ...
- HDU 2150 Pipe（ 判断线段相交水 ）
链接:传送门 题意:略 思路:数据量很小,直接暴力所有线段 /********************************************************************* ...
- [AtCoder Grand Contest 024 Problem E]Sequence Growing Hard
题目大意:考虑 N +1 个数组 {A0,A1,…,AN}.其中 Ai 的长度是 i,Ai 内的所有数字都在 1 到 K 之间. Ai−1 是 Ai 的子序列,即 Ai 删一个数字可以得到 Ai−1. ...
- cf掉分记——Avito Code Challenge 2018
再次作死的打了一次cf的修仙比赛感觉有点迷.. 还好掉的分不多(原本就太低没法掉了QAQ) 把会做的前三道水题记录在这.. A: Antipalindrome emmmm...直接暴力枚举 code: ...
- Manacher(最大回文字串)
很好的讲解 注意两端的字符要不同,同时数组要开大一些 [Manacher]最长回文子串 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...
- Shiro：初识Shiro及简单尝试
Shiro 一.什么是Shiro Apache Shiro是Java的一个安全(权限)框架 作用:认证.授权.加密.会话管理.与web集成.缓存等 下载地址:http://shiro.apache.o ...
- 【codeforces 234F】Fence
[题目链接]:http://codeforces.com/problemset/problem/234/F [题意] 你有n块板要凃油漆; 然后每块板有高度h[i];(宽度都为1) 然后每块板只能凃同 ...
- HashMap导致死循环问题
虽然我推测是链表形成闭环,但 没有去证明过.从网上找了一下: http://blog.csdn.net/autoinspired/archive/2008/07/16/2662290.aspx 里面也 ...
- java语言MySQL批处理
本质来讲就是使用Statement和PreStatement的addBatch()方法 代码 import java.sql.*; public class GetConnection{ public ...