图片/图形
多层图片视觉差互动jQuery特效插件
PetitQ
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 属性指定该元素的运动速率
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
