图片放大镜效果实现过程详解

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记…

效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -。-):

实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例):

css:

上面css中需要注意的就是几个position和缩放比例,注意调整下即可

写完样式,来看看布局:

html:

接下来是主要的js代码,一如既往的带注解:

js:

补bug图:

看完后是不是觉得简直不要太简单,接下来就来理一理以上代码中能够抽取出来在平常开发中比较实用的知识点:

Element.getBoundingClientRect()

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

例子:

效果如图:

从效果图上不难看出,当我移动视图后再点击body,打印的对象都能够正确返回元素的大小及其相对于视口的位置

这个方法也可以用于实现当某元素滚动到底/顶部时触发对应事件,相当方便。

Event

1.event.target 和 event.currentTarget

target:指向触发事件的元素

currentTarget:指向被绑定事件句柄的元素

只有当绑定的事件处理程序与触发该事件处理程序都为同一个对象的时候,两者相同

例子代码:

html:

js:

效果图:

从效果图中,我们可以看到,当点击456时,target指向的是456所在的bDiv,currentTarget则指向aDiv,因为事件是绑定在aDiv上,但触发是在bDiv上,而且bDiv又在aDiv内,当点击123时,则target与currentTarget一致,绑定和触发都在aDiv上。

2.event.preventDefault() & event.stopPropagation()

preventDefault:如果事件可取消,则取消该事件,而不停止事件的进一步传播

stopPropagation:阻止捕获和冒泡阶段中当前事件的进一步传播

3.event.stopPropagation() & event.stopImmediatePropagation()

stopPropagation:阻止捕获和冒泡阶段中当前事件的进一步传播

stopImmediatePropagation:阻止元素上调用相同事件的其他事件监听并阻止冒泡

两者区别的例子:

html:

js:

上面代码执行结果为:

注释掉 e.stopImmediatePropagation(); 的结果为:

虽然都是些简单的知识点,在平常开发中也是很实用的,希望能从细节出发,没事多复习复习 -。-~

后来一时兴起将放大镜写的更傻瓜式配置的插件了… 点我看代码(github地址)

1 11 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部