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


Posted in jQuery onSeptember 30, 2018

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

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

图片.png

jQuery实现点击图标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循环放大缩小功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
学习jQuery中的noConflict()用法
Sep 28 #jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
jQuery pjax 应用简单示例
Sep 20 #jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
jQuery使用each遍历循环的方法
Sep 19 #jQuery
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
You might like
PHP分页函数代码(简单实用型)
2010/12/02 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
js实现随机点名
2021/01/19 Javascript
Python命名空间详解
2014/08/18 Python
python中的多重继承实例讲解
2014/09/28 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
会计专业毕业生自荐信范文
2013/12/20 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
活动费用申请报告
2015/05/15 职场文书
二胎满月酒致辞
2015/07/29 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python