HTML一个极其简单实用的浏览器加载效果

蔚落 2022-06-03 09:23 104阅读 0赞

需求分析：在wap/pc浏览器界面中，为了增强用户的体验效果，在进行数据操作的时候，通常需要一个加载效果来提示用户等待，但是很多时候为了这么一个效果回去引用一个插件显得相当冗余，因此这里提供一个方便的效果，在当前页面就能做到提示效果，仿苹果加载提示，快来试试吧！

代码呈现：

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>加载效果demo</title>
      
      <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
      <style>
    	#tipDiv{
    		display:none;
    		position: absolute;
    		left: 39%;
    		top: 230px;
    		z-index: 9999;
    		background: #d9d9d9;
    		padding: 10px;
    		border-radius: 5px;
    	}
    	#tipInfo{
    		margin-top: 10px;
    	}
      </style>
     </head>
     <body>
      
      <div id="tipDiv">
        <center><img style="width:25px;" src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif"></center>
        <div id="tipInfo"></div>
      </div>
    
      <script type="text/javascript">
        //显示提示
    	function showTip(info){
    		$('#tipInfo').html(info);
    		$('#tipDiv').show();
    	}
    	//初始加载提示
    	showTip('内容正在加载...');
    	//关闭提示
    	function closeTip(){
    		$('#tipDiv').hide();
    	}
      </script>
     </body>
    </html>

**每天进步一点，更多精彩，欢迎关注公众号“编程社”！**

![20190727103428866.png][]

[20190727103428866.png]: https://img-blog.csdnimg.cn/20190727103428866.png