HTML5----移动鼠标:青蛙，蝴蝶，草丛，池塘滑动-jparallax

效果：移动鼠标:青蛙，蝴蝶，草丛，池塘滑动



视差效果是利用图片的移动速度差实现的。这里我们使用了4张图片。下面是这四张图片的基本效果。

图层1:主背景图片，绿色池塘

图层2:重叠层，青蛙

图层3: 重叠层，草丛

图层4: 重叠层，蝴蝶

这第2，3，4张图片是具有透明效果的png图片。



html:

<div id="parallax">
	<div class="layer" style="width:1200px; height:250px;">
		<img src="image/grass.png" style="width:1200px; height:250px;"/>
	</div>
	<div class="layer" style="width:500px; height:250px;">
		<img src="image/frog2.png" style="width:500px; height:250px;"/>
	</div>
   <div class="layer" style="width:1200px; height:300px;">
		<img src="image/butterflies3.png"  style="width:1200px; height:300px;"/>
   </div>
</div>

CSS:

<style type="text/css">
#parallax {position:relative; overflow:hidden; width:950px; height:250px;
	background-image:url('image/background.jpg');}
.layer{ position: absolute;}
</style>

JS:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#parallax .layer')
	.parallax({
		mouseport:$('#parallax')
	})
});

</script>

图片及js下载：http://pan.baidu.com/s/1eQ491MM