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编写textarea输入字数限制代码
Mar 23 jQuery
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
值传递还是引用传递
2015/02/08 面试题
幼师求职自荐信范文
2014/01/26 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
投资合作协议书
2014/04/17 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
购房委托书范本
2014/09/18 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android