今天我们学了进度条,js仿163收缩效果,还有js滑动下拉菜单。同时复习了CSS一些东西!
进度条主要是拼接显示的字符串内容
<script language="javascript" type="text/javascript">
//百分之多少,要显示的数字
var c=0;
//输入显示的内容
var bar="";
//显示的格式
var style1="|";
function loadBar(){
//拼接显示的字符串内容
bar=bar+style1;
//百分比要累加
c++;
document.getElementById("loadbar").innerHTML=bar+" "+c+"%";
if(c<=100){
setTimeout("loadBar()",100);
}else{
location="163.html";
}
}
</script>
</head>
<body οnlοad="loadBar()">
<div id="loadbar" style="border:dashed 1px #FF0000; width:540px; height:20px; margin:auto auto auto auto"></div>
163收缩效果主要是要先隐藏原图片,然后慢慢的让它显现出来!
<script language="javascript" type="text/javascript">
//定义要移动的距离
var h=0;
var maxheight=300;
var st;
var top=document.getElementById("top");
//初始时,设置top为隐藏状态
top.style.display="none";
//定义让广告部分展开
function moveDown(){
//累加
h+=2;
//设置高度等于我们累加的值
top.style.height=h;
//设置层显示
top.style.display="block";
//判断是否到最大
if(h<=maxheight){
st=setTimeout("moveDown()",50);
}else{
clearTimeout(st);
//延迟3秒,开始收缩
setTimeout("moveUp()",3000);
}
}
//定义让广告部分收缩
function moveUp(){
//设置
h-=2;
//设置高度等于我们累加的值
top.style.height=h;
//设置层显示
top.style.display="block";
if(h<=0){
top.style.display="none";
//清空定时器
clearTimeout(st);
}else{
//如果h>0,则继续收缩
st= setTimeout("moveUp()",50);
}
}
</script>