个人笔记015--js路由和css实现元素垂直居中

最新推荐文章于 2022-05-30 20:14:24 发布

原创最新推荐文章于 2022-05-30 20:14:24 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#路由 #水平垂直居中 #Cross origin requests are only

本文通过一个实例，展示了如何使用原生JS实现页面路由，并结合三种不同的CSS技巧实现元素的水平垂直居中，包括绝对定位、transform和Flex布局。

这两天时间比较清闲，想学习一下原生js实现路由的demo，查询了好多别人的博客和一些资料，顺便做一下元素垂直居中就做成了下面这个样子：

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js路由和css实现元素垂直居中</title>
    <style>
		.nav{
			text-align:center;
		}
        .nav li{
            display:inline-block;
            list-style:none;
        }
        .nav li a{
            display:inline-block;
            text-decoration: none;
            padding:10px 15px;
        }
        a{
            cursor: pointer;
        }
    </style>
    
</head>
<body>
    <section class="warp">
        <div class="nav">
            <ul>
                <li><a href="javascript:void(0)" data-path="one">第一种</a></li> 
                <li><a href="javascript:void(0)" data-path="two">第二种</a></li>
                <li><a href="javascript:void(0)" data-path="three">第三种</a></li>
            </ul>
        </div>
        <div id="router" class="router">
            <!-- 内容加载区域 -->
        </div>
    </section>
    
    <script src="jquery-3.4.0.min.js"></script>
    <script src="router.js"></script>
 
</body>
</html>

router.js代码：

(function(){  	  	
  	var router = [
  		{
			  'path':'one',
			  'url':'./centered_one.html'
		  },
		  {
			  'path':'two',
			  'url':'./centered_two.html'
		  },
		  {
			  'path':'three',
			  'url':'./centered_three.html'
		  }
  	];
  	//改变页面
  	function change_page(url){
  		$('#router').load(url)
  	}
	$('a').on('click',function(){
		var path = $(this).data('path');
		for(var i in router){
			$('li')[i].style.background = '#fff';	
			$('li a')[i].style.color = 'blue';
			if(router[i].path == path){
				$('li')[i].style.background = 'blue';
				$('li a')[i].style.color = '#fff';
				change_page(router[i].url);
				history.pushState(router[i].url,null,'#/'+router[i].path);
			}
		}
	})
	window.addEventListener('popstate',function(e){
		var url = e.state;
	    change_page(url);
	    
	});
	window.addEventListener('load',function(){
		var path = location.hash.slice(2) || '/one';
		for(var i in router){//刷新 加载
			if(router[i].path == path){
				$('li')[i].style.background = 'blue';
				$('li a')[i].style.color = '#fff';
				change_page(router[i].url);	
				history.replaceState(router[i].url,null,'#/' + path);		
				break;	
			}
			if(i == router.length-1){//重定向
				change_page(router[0].url);	
				history.replaceState(router[0].url,null,'#/' + router[0].path);	
			}
		}						
	});

})();

centered_one.html代码(即第一种css实现元素水平垂直居中)：

 <style>
        #father{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            position: relative;
            margin: 0 auto;
        }
        .centered{
            width: 200px;
            height: 200px;
            padding: 10px;
            background-color: green;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        .centered p{
            color: #fff;;
        }
    </style>
<section>
    <div id="father">
        <div class="centered">
            <p>111111111js路由和css实现元素垂直居中111111111</p>
        </div>
    </div>
</section>

centered_two.html代码(即第二种css实现元素水平垂直居中)：

   <style>
        #father{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            position: relative;
            margin: 0 auto;
        }
        .centered{
            min-width: 180px;
            min-height: 180px;
            padding: 10px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        .centered p{
            color: #fff;
        }
    </style>
<section>
    <div id="father">
        <div class="centered">
            <p>222222js路由和css实现元素垂直居中2222222</p>
        </div>
    </div>
</section>

centered_three.html代码(即第三种css实现元素水平垂直居中)：


<style>
    #father{
        width: 500px;
        height: 500px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .centered{
        width: 200px;
        height: 200px;
        padding: 10px;
        background-color: green;
    }
    .centered p{
        color: #fff;
    }
</style>
<section>
    <div id="father">
        <div class="centered">
            <p>3333333333js路由和css实现元素垂直居中33333333</p>
        </div>
    </div>
</section>

PS:以上代码如果直接在桌面运行会报错：Cross origin requests are only supported for protocol schemes: http, data, chrome, se-extension, https，当然火狐浏览器是没问题的

以下是几个解决方法：

1.换编辑器

使用webstorm或是visual studio这种重量级的IDE（此类IDE都内置了HTTP服务器）。

2.安装Server插件:
这里针对VSCode和Sublime介绍一款插件—VSCode，这个插件功能十分强大，不止可以解决ajax不支持file协议的问题，还可以实现在编辑器里保存修改后，页面自动刷新的功能

3.浏览器

1）直接用火狐打开即可；

2）Chrome：

Windows：
设置Chrome的快捷方式属性，在“目标”后面加上–allow-file-access-from-files，注意前面有个空格。

Mac：
打开终端，输入下面命令：open -a “Google Chrome” –args –disable-web-security然后就可以屏蔽安全访问了