点击图片放大全屏加载,再次点击图片/文档回到原来位置

导读:生命不息,折腾不止
  第二次写文章,其实我一直都不明白为什么很多人喜欢写文章,现在我好想知道一点点了,学到的东西一旦过了一段时间,好像就忘了…
  看来写文章,或许有这么个原因吧,担心有一天忘了。
 
回到正题:
  这次主要是想到了一个点击图片全屏加载,想到就做,毕竟生命不息,折腾不止! 
  本次主要用到了jQuery,可以用原生JS实现,但是需要封装的函数太多,不过这难不倒我,等待有时间就用原生JS写一遍,先把思路理顺一下
  1.点击图片,图片放大。
  2.背景用遮罩盖着,这样能够更有效的让眼神集中到图片上,既然做的是这个效果,那么就要顺着这个理念走下去。
  3.当放大之后再次点击图片/背景就把图片恢复正常。
  4.还要兼容IE5以上…
  好,顺着这个思路走下去(其中会碰到很多的细节问题,稍后在文中细说)
  

jQuery(document).ready(function() {
   
            var protoWidth = 0,  //这个很重要是恢复图片时候用到的值
                protoHeight = 0;  //同上
            $(document).on('click', function (e) {
   
                var $a = $(e.target);   //获取点击目标
                if($a.is('img') && !$a.is('.screenimg')){
                    bigimg();
                }else{
                    normalimg();
                }
            });
        });

  这里用到的是一个事件委托,可能有人或许不是很理解这种方式,我简单说一下我的理解方式,简单接地气点吧!
  —————————————–start—————————–
  比如:我有一个4人团队,其中3个小弟,一个大哥,我给3个小弟发工资,然后我就走了,后面老大又招进来了几个小弟,但我已经走了,工资发不了(这里的工资大家理解为是添加的事件如:点击事件/鼠标移动/鼠标进入…),但这个不行啊,你一定要做事才行,不做事那有什么用。
  事件委托:我跟大哥说,以后发工资就由你来发,只要有新进来的小弟,你就给我发工资。(意思就是:以后他们的事件委托大哥你来处理,只要确定他是我们团队(document)的人(img),你就给我添加事件)。
  —————————————–end—————————–
  既然用到了事件委托,那么就要用到事件对象, (e.target)

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值