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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
mysql 搜索之简单应用
2007/04/27 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript静态的动态
2006/09/18 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python用for循环求和的方法总结
2019/07/08 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Python post请求实现代码实例
2020/02/28 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python中格式化字符串的四种实现
2020/05/26 Python
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
人事助理自荐信
2014/02/02 职场文书
领班岗位职责范文
2014/02/06 职场文书
会计工作能力自我评价
2015/03/05 职场文书
新郎婚礼致辞
2015/07/27 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python