【JavaScript实例】图片从中间向两边展开动画

最新推荐文章于 2024-09-10 14:15:01 发布

我真的不会打代码

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： js html javascript

本文链接：https://blog.csdn.net/weixin_44637000/article/details/108890838

版权

这篇博客详细介绍了如何使用JavaScript实现一个图片加载时从中间向两边展开的动画效果，该效果在页面刷新时可见，最终图片会展开到特定的位置。

摘要由CSDN通过智能技术生成

刷新页面，图片从中间向两边展开到特定位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.banner{
				width: 100%;
				height: 400px;
				background-image: url(../img/banner.jpg);
				position: relative;
			}
			
			.img_r{				
				position: absolute;		
			}			
			.img_l{				
				position: absolute;	
				
			}
			
			
			
		</style>
	</head>
	<body onload="img_play()">
		<div class="banner" >
			<!-- 图片 -->
			<div class="img">
				<div class="img-1">
					<div class="img_r" style="left: 800px;">
						<img src="../img/关于一诺.png" >				
					</div> 
				</div>
				
				<div class="img-2">
					<div class="img_l" style="left: 800px;">
						<img src="../img/关