第一篇博客不知道写啥 写一个最近实现的小功能。。
想实现一个功能选中某个图片时特的简介能从下向上出现
<html>
<title>图片从下向上移动</title>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
var content;
var borderStyle;
var n =500;
var intervalN =null;
window.onload=function(){
content=document.getElementById("content");
borderStyle=document.getElementById("borderStyle");
intervalN=setInterval("up()",10);
};
function up() {
if(n>340)
{
n=n-1;
content.style.top=n+"px";
}
else
{
clearInterval(intervalN);
}
}
</script>
<style type="text/css">
#borderStyle{
width:500px;
height:500px;
position:absolute;
z-index:2;
background-color:Blue;
overflow:hidden;
}
#content{
margin-left:40px;
height:320px;
top: 500px;
position:absolute;
z-index:1;
}
#content p{
position: absolute;
z-index: 1;
top:0px;
color: white;
left: 38px;
width: 100px;
height: 24px;
}
</style>
</head>
<body>
<center>
<div id="borderStyle">
<div id="content">
<img src="img/4.png" />
<p id="info">中国美食介绍</p>
</div>
</div>
</center>
</body>
</html>