前端利用js实现简单的邮箱

最新推荐文章于 2024-08-06 11:45:53 发布

钱端攻城狮

最新推荐文章于 2024-08-06 11:45:53 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签： CSS JavaScript 动态效果邮箱列表用户交互

本文链接：https://blog.csdn.net/m0_54932975/article/details/123561905

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			
			.root{
				width: 500px;
				height: 400px;
				border: #FFD700 2px solid ;
				margin: 30px auto;
			}
			.email{
				width: 100px;
				height: 100%;
				float: left;
				background-color: pink;
				position: relative;
			}
			
			.email li{
				width: 100%;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border-bottom: #FFD700 solid 2px ;
				box-sizing: border-box;
			}
			.email li:last-of-type{
				border-bottom: none;
			}
			.email span{
				position: absolute;
				right: 0;
				top: 25px;
				width: 0px;
				height: 0px;
				display: inline-block;
				border:25px solid transparent;
				border-right-color: red;
				transition: all .3s linear;
			}
			/*---------------------*/
			.right{
				float: right;
				width: 400px;
				height: 100%;
				background-color: orange;
				font-size: 32px;
				text-align: center;
				line-height: 400px;
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="root">
			<ul class="email">
				<li>QQ邮箱</li>
				<li>网易邮箱</li>
				<li>新浪邮箱</li>
				<li>阿里邮箱</li>
				<span id="sanjiao"></span>
			</ul>
			<div class="right">这是QQ邮箱</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	//1.获取标签
	var liArray = document.getElementsByTagName("li");
	//右边的div
	var rightDiv = document.getElementsByClassName("right")[0];
	
	//2.变量
	var colorArray = ["orange", "purple", "greenyellow", "skyblue"];
	
	//3.函数事件  index中文 下标
	for (var i = 0; i < liArray.length; i++) {
      liArray[i].index = i;
      liArray[i].onmouseenter = function(){
      	//1.修改三角形的位置
      	sanjiao.style.top = 25 + 100 * this.index + "px";
      	//2.修改文字
      	rightDiv.innerHTML = "这是" + this.innerHTML;
      	//3.修改背景颜色
      	rightDiv.style.backgroundColor = colorArray[this.index];
      }
	}
	
	
</script>