javascript案例

  今天我们学了进度条,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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值