原文来自:
所谓的倾斜效果,我也不知如何用语言描述,那就直接看Demo啦,下面我们会对这个效果的实现原理逐步分析:
http://codepen.io/CodingMonkeyzh/pen/jPYNyr
文档结构
对一个图片添加该效果,首先,我们需要一个具有宽高的容器。DOM 结构非常简单。
1 | <div class="container"> |
上面这段结构经过脚本处理之后,会被替换成下面的结构:
1 | <div class="container"> |
脚本分析
我们利用了filtfx.js这个插件对上面的图片进行处理, 来实现倾斜效果。我在原来的代码中加入了一些注释,来帮助我们理解。下面我们对该插件的核心代码进行分析。
1 | function TiltFx(el, options) { |
这是构造函数,如果我们的文档中,加入了上面的插件,那么插件会遍历文档中具有tilt-effet
的img
元素,来调用构造函数TiltFx()
:
1 | function init() { |
TiltFx()
具有一个原型属性,两个原型方法。原型属性配置了一些默认的参数用于调用:
1 | /** |
第一个原型方法是_init()
,用于初始化DOM结点,生成我们的目标DOM结点:
1 | TiltFx.prototype._init = function() { |
另外一个原型方式是用于监听鼠标事件之类的:
1 | TiltFx.prototype._initEvents = function() { |
我们可以看到,监听mousemove
的事件处理函数中的计算比较复杂,关键的部分就是在这里:
1 | var el = self.imgElems[i], |
这里我们根据鼠标的位置,计算出了各个图层对应的偏移量和旋转角度,然后对它们进行变换即可。
最后mouseleave
之后,我们再把个个图层恢复到初始位置就行了。
Demo:http://codepen.io/CodingMonkeyzh/pen/jPYNyr