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

最新推荐文章于 2024-03-18 19:21:30 发布

damys

最新推荐文章于 2024-03-18 19:21:30 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/damys/article/details/38331819

HTML5.CSS3 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种通过不同图片层的移动速度差来实现视差滚动效果的方法。使用四层图片，包括背景层和三个重叠层（青蛙、草丛、蝴蝶），并通过HTML、CSS和JavaScript实现了交互式的视差效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

视差效果是利用图片的移动速度差实现的。这里我们使用了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