Html5添加实用的多层图片视觉差互动特效插件教程

一、使用方法
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.parallaxmouse.min.js"></script>   
 

二、Html结构
<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
#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},
   ]
});                


KeyMob移动端广告平台是常乐网络有限公司于2014年打造专注于为广告主提供精准对移动营销广告进行高效的优化管理。KeyMob移动端广告平台拥有雄厚的技术支持，全方位的专业服务。用最新颖的广告形式来带给广告主最优质的服务！