Html5添加實用的多層圖片視覺差互動特效插件教程

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

2、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>   

3、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;
}

4、初始化插件
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移動端廣告平臺擁有雄厚的技術支持，全方位的專業服務。用最新穎的廣告形式來帶給廣告主最優質的服務！