JavaScript图片动态移动及文字浮现

最新推荐文章于 2022-07-19 17:09:49 发布

扶公瑾以苏

最新推荐文章于 2022-07-19 17:09:49 发布

阅读量2.7k

点赞数 5

分类专栏：前端文章标签： javaScript 文字浮现图片移动

本文链接：https://blog.csdn.net/qq_36470686/article/details/82812119

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

先说我们这个小动画想要达到的效果：

月亮最开始藏在海中，只露出一点点。
随着时间，开始慢慢上升，直到一个高度停止。
当月亮停止上升，出现一首诗。

效果一：

我们先设置一个div，设置你想要的图为背景，以让其他图片可以很方便的覆盖在上面。这个div中包含三个div：

第一个div:包含背景图中的海的图片。
第二个div:包含月亮图片。
第三个div:作为文字容器。

既然要被海遮盖住，那么要使两张图片处于不同层，使用z-index属性以达到效果。使月亮的z-index属性小于海面的z-index便可以使两张图片处于不同层。

效果图：

效果二：

我们按照如下步骤打到效果：

获取图片所在div对象
设置div 左上角坐标，起始点的坐标
设置图片的行进速度
设置图片的最大浮动高度
判断图片是否达到醉倒高度。如果达到，调整速度为0。如果未达到，设置坐标值为起始坐标+速度
延迟调用该图片移动函数，每隔50毫秒调用一次

效果三：

在函数中设置一个变量H为0，当图片达到最大浮动高度的话，该变量置为1.当下一次调用图片移动函数时，获取文字框所在div对象，使其中出现文字。

以下为所有代码：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			.moon{
				position: absolute;
  				left: 550px;
  				top: 305px;
				height:100px;
				width:100px;
				z-index:1;
			}
			.bottom{
				position:absolute;
				top:310px;
				z-index:99;
			}
			img{
 				position:absolute; 
 				filter:alpha(opacity=100);/* IE */
 				-moz-opacity:1;/* Moz + FF */
 				opacity: 1;/* 支持CSS3的浏览器（FF 1.5也支持）*/
			}
			#poem{
				position:absolute;
				top:135px;
				left:700px;
				z-index:1;
				font-size:20px;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<div style="background:url('images/sea.png');width:1005px;height:585px;no-repeat">
			<div class="bottom">
				<img src="images/bottom.png"/>
			</div>
			<div class="moon" id="moon">
				<img src="images/moon.png" style="100px;width:100px;" onclick="move()"/>
			</div>
			<div id="poem"> </div>
		</div> 
	</body>
	<script language="JavaScript" type="text/javascript">
 		//获取图片所在的div对象
 		var img=document.getElementById("moon");
 		//设置div起始坐标
 		var x=550,y=305;
 		//设置图片的行进速度
 		var xSpeed=0,ySpeed=-1;
 		//设置图片的最大浮动的高度
 		var h=105;
		var H=0;
 		function floatimg(){
  		//比较图片是否到达指定高度 
  		if(y<h||y<0){ ySpeed= 0;H=1; }
  		if(H==1){
                        //获取文字框所在的div对象
			var tt=document.getElementById("poem");
                        //改变文字框中内容
			tt.innerHTML="海上明月枕边人.";
		}
  		//设置坐标值 起始坐标+速度
  		x+=xSpeed;
  		y+=ySpeed;
 		img.style.top=y+"px";
 		img.style.left=x+"px";
 		//延迟调用函数floatimg()，每个50毫秒调用一次
 		setTimeout("floatimg()",50);
		 }
 		floatimg();
	</script>
</html>

最终效果图：

扶公瑾以苏

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
JavaScript图片动态移动及文字浮现

先说我们这个小动画想要达到的效果：月亮最开始藏在海中，只露出一点点。随着时间，开始慢慢上升，直到一个高度停止。当月亮停止上升，出现一首诗。效果一：我们先设置一个div，设置你想要的图为背景，以让其他图片可以很方便的覆盖在上面。这个div中包含三个div：第一个div:包含背景图中的海的图片。第二个div:包含月亮图片。第三个div:作为文字容器。既然要被海遮盖住，那...
复制链接

扫一扫