jquery.parallaxmouse是一款非常实用的jQuery多层图片视觉差互动特效插件。该视觉差插件文件体积小,可以通过鼠标的上下左右移动来进行互动,非常适合用于制作网站的Banner。
使用方法
使用该视觉差特效插件需要引入jQuery和jquery.parallaxmouse.min.js文件。
<script src="js/jquery.min.js"></script> <script src="dist/jquery.parallaxmouse.min.js"></script>
HTML结构
该视觉差插件使用class来决定每个元素的原点方向。如果想要一个元素从左边开始定位,可以为它添加left
class。如果是从上边,使用top
class。如果是从右边,则不要添加left
class,如果是从下巴,则不要添加top
class。
<div id="galaxy"> <img id="star1" src="images/star1.png" class="top left"> <img id="star2" src="images/star2.png" class="top"> <img id="star3" src="images/star3.png" class=""> </div>
CSS样式
在CSS中设置元素的初始位置的时候,position
属性必须设置为absolute
。另外该插件所需要的CSS单位为像素。
#galaxy { width: 100%; height: 400px; max-height: 400px; position: relative; background: #2f2f6d; overflow: hidden; } #star1 { position: absolute; top: 150px; left: 200px; } #star2 { position: absolute; top: 150px; right: 200px; } #star3 { position: absolute; bottom: 150px; right: 200px; }
初始化插件
jQuery(window).parallaxmouse({ invert: true, range: 400, elms: [ {el: $('#star1'), rate: 0.2}, {el: $('#star2'), rate: 0.4}, {el: $('#star3'), rate: 0.1}, ] });
jQuery选择器选择的元素是视觉差元素在鼠标互动是相对的元素。
插件的参数配置非常简单:
-
invert
:指定元素的运动方向是否相对于鼠标移动的方向。 -
range
:指定一个元素在某个方向上可以运动的最大距离。 -
elms
:一个数组对象,用于指定哪些元素要进行视觉差互动。每一个元素对象都包含一个指向视觉差元素的引用,rate
属性指定该元素的运动速率。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!