代码:自动弹出框,3秒之后消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
300px;
height: 330px;
background-color: pink;
position: fixed;
right: 10px;
}
img{
float:left;
180px;
height:180px;
}
</style>
</head>
<body>
<div id="box">
<img src="1,jpg">
身作彩凤双飞翼,心有灵犀一点通。
最美好的年华,与你携手共度。(登场音效)
凤凰鸣矣,于彼高岗;梧桐生矣,于彼朝阳。
浴火涅磐,唯求清风明月共天涯。
见过彼岸无尽的红莲,如同你我相思蔓延。
生生世世若初见,相思长守。
倾覆了故国,惊醒镜花水月。
死亡本是轮回的归宿,因所爱而无畏。
看出来了,你五行缺真爱。
等待再世的重逢。
再无涅槃。 <br>
- 凤凰于飞
</div>
</body>
<script>
window.onload=function(){
init();
}
var bottomPosition=-550;
function init(){
var divNode = document.getElementById("box");
divNode.style.bottom=bottomPosition+"px";
bottomPosition+=3;
if(bottomPosition<50){
setTimeout(init,0);
}
}
var obox=document.getElementById("box");
setTimeout (function(){
obox.style.display="none";
},5000)
</script>
</html>