原生js实现全屏展示效果

最新推荐文章于 2024-09-02 14:07:15 发布

loohopen

最新推荐文章于 2024-09-02 14:07:15 发布

阅读量1.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/loohopen/article/details/53750891

版权

本文介绍了如何使用原生JavaScript实现全屏展示效果，无需依赖jQuery等外部库。通过HTML结构和JavaScript代码的结合，详细讲解了实现全屏功能的步骤和关键点。

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

使用原生js编写，没有使用jQuery插件，

首先是HTML部分：

<body>
	<div id="main">
	    <div class="section">
	        <div class="content">
	    	    <h1>this is the first page</h1>
	    	</div>    
	    </div>
	    <div class="section>
	    	<div class="content">
	    	    <h1>this is the second page</h1>
	    	</div>    
	    </div>
	    <div class="section">
	    	<div class="content">
	    	    <h1>this is the third page</h1>
	    	</div>    
	    </div>
	    <div class="section">
	    	<div class="content">
	    	    <h1>this is the fourth page</h1>
	    	</div>    
	    </div>
	</div>
</body