<!DOCTYPE html>
<html>
<head>
<title>窗口右下角消息弹出框</title>
<meta charset="utf-8"/>
<style>
*{margin:0;padding:0}
#msg{width:200px;height:200px;
position:fixed;
right:30px;
bottom:-200px;
background-color:LightBlue;
transition: all .5s linear;
}
#msg>a{float:right;
padding:5px 10px;
border:1px solid black;
cursor:pointer;
}
</style>
</head>
<body>
<div id="msg">
<a>X</a>
</div>
<script>
//首先要在css中为msg添加transition属性
//当整个页面加载完成后
window.onload=function(){
msg.style.bottom="0px";
}
msg.children[0].onclick=function(){
msg.style.bottom="-200px";
setTimeout(function(){msg.style.bottom="0px"},5000);
}
</script>
</body>
</html>
窗口右下角消息弹出框
猜你喜欢
转载自blog.csdn.net/weixin_42103706/article/details/84137525
今日推荐
周排行