<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
300px;
height: 300px;
border:1px red solid;
position: fixed;/*相对于浏览器窗体进行定位*/
right: 5px;
}
img{
float:left;
180px;
height:180px;
}
</style>
<script type="text/javascript">
/*两个定时器函数的差别：
* setTimeout(表达式,时间间隔)：经过一次时间间隔运行一次表达式----仅仅运行一次
setInterval(表达式。时间间隔)：每经过一次时间间隔运行一次表达式----运行无限次
setTimeout能够通过回调函数本身就ok了,在以下的代码中有所体现哦
*/
window.onload=function(){
init();
}
//设置div的bottom的值。是指div的底部距离它的最临近的父元素之间的距离
var bottomPosition=-550;
function init(){
//由于整个文档中有仅仅有一个div，全部通过这样的方式获取了存储图片的div了
var divNode = document.getElementsByTagName("div")[0];
//设置了bottom属性。使得開始载入的时候这个div是看不到的
divNode.style.bottom=bottomPosition+"px";
bottomPosition+=1;//没启动这个函数位置就会向上移动一个像素。
if(bottomPosition<50){
//间隔10毫秒启动这个函数
setTimeout(init,10);
}
}
//加入一个关闭button
function closeAdv(){
var divNode = document.getElementsByTagName("div")[0];
divNode.style.display="none";
}
</script>
</head>
<body>
<div>
<input onclick="closeAdv();"/>
<img src="3.jpg">胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说
胡哥是个传说 胡哥是个传说，胡哥是个传说，胡哥是个传说
胡哥是个传说 胡哥是个传说。胡哥是个传说，胡哥是个传说
胡哥是个传说胡哥是个传说
胡哥是个传说 胡哥是个传说，胡哥是个传说。胡哥是个传说
</div>
</body>
</html>注意：那里3.jpg该位置需要给她一个图片。版权声明：本文博主原创文章，博客，未经同意不得转载。