jquery-mouse-parallax是一款基于TweenMax的鼠标互动背景视觉差特效jQuery插件。该视觉差特效使用多个图片层来制作,用户可以通过鼠标移动来使各个图片层以不同的速度进行移动,从而产生视觉差效果。
使用方法
该视觉差特效依赖于TweenMax,使用时要引入jQuery,TweenMax.min.js和jquery-parallax.js文件
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="js/jquery-parallax.js" type="text/javascript"></script>
HTML结构
你可以在页面中添加多张用于制作视觉差效果的图片。
<img src="bg.jpg" alt="Background" class="background">
<img src="cloud.png" alt="Clouds" class="cloud">
CSS样式
你需要确保作为图片层的图片都使用绝对定位方式:position: absolute,并给它们设置一个初始位置。
.background {
position: absolute;
z-index: 1;
...
}
.cloud {
position: absolute;
top: 0; left: 0;
z-index: 2;
...
}
初始化插件
在页面初始化完毕之后,可以通过下面的方法来初始化该视觉差特效插件。
$( document ).mousemove( function( e ) {
$( 'ELEMENT' ).parallax( resistance, e );
$( 'ELEMENT-2' ).parallax( resistance, e );
});
resistance是一个整数或浮点数,代表移动的距离。e是鼠标移动事件。






![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)















