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

最新推荐文章于 2024-04-02 00:27:20 发布

damys

最新推荐文章于 2024-04-02 00:27:20 发布

阅读量2.6k

点赞数

分类专栏： HTML5.CSS3 文章标签： jparallax 移动鼠标

本文链接：https://blog.csdn.net/damys/article/details/38331819

版权

HTML5.CSS3 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

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

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

图层1:主背景图片，绿色池塘
图层2:重叠层，青蛙
图层3: 重叠层，草丛
图层4: 重叠层，蝴蝶

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

jquery-parallax-instruction2

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