导读:生命不息,折腾不止
第二次写文章,其实我一直都不明白为什么很多人喜欢写文章,现在我好想知道一点点了,学到的东西一旦过了一段时间,好像就忘了…
看来写文章,或许有这么个原因吧,担心有一天忘了。
回到正题:
这次主要是想到了一个点击图片全屏加载,想到就做,毕竟生命不息,折腾不止!
本次主要用到了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)(点击的对象