程序博客网 > 电商网络销售是做什么

仿163首页的广告收缩效果/菜单滑动/进度条

来源：互联网发布：电商网络销售是做什么编辑：程序博客网时间：2024/05/01 14:11

首页的广告收缩效果

<style>
#top{
   position:relative;
}
#content{
   position:absolute;
}


</style>
</head>

<body onload="moveDown()" style="margin:0px; 0px;">
<div id="top" style="width:100%; height:100px; background-color:#0000CC">网页的广告部分<br>

</div>
<div id="content" style="width:100%; height:500px; background-color:#FF0000">这是网页的正文部分</div>

</body>
</html>
<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+"px";
   //设置层显示
   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+"px";
   //设置层显示
   top.style.display="block";

   if(h<=0){

       top.style.display="none";

       //清空定时器
       clearTimeout(st);

   }else{

       //如果h>0,则继续收缩
      st= setTimeout("moveUp()",100);

       }


}

</script>

菜单滑动

<style>

div{
   display:none;}
ul{
   list-style-type:none;
    margin-top:0px;
   margin-left:-20px;
   }
li{
   width:80px;
   background-color:#FFFFFF;
   display:block;
   padding:4px 0px 2px 0px;
   text-align:center;
   }
li a{
   color:#666;
   text-decoration:none;
   padding:4px 0px 2px 0px;
   }
li a:hover{
   color:#00F;
   background-color:#FF0;
   display:block;
   border-style:solid;
   border-width:2px;
   border-color:#0C0;
   }
span a:hover{
   color:#FF0;

   }
span a{
   text-decoration:none;
   }

</style>

<script language="javascript" type="text/javascript">

function Show(dnum){

   document.getElementById(dnum).style.display="block";

}

function Hidden1(dnum){

   document.getElementById(dnum).style.display="none";

}

</script>

</head>

<body>
<table width="385" border="0">
<tr>
    <th width="93" height="59" bgcolor="#FFFF00" scope="col" onmouseover="Show(1)" onmouseout="Hidden1(1)"><span><a class="t" href="#">武侠小说</a></span></th>
    <th width="93" bgcolor="#FFFF00" scope="col" onmouseover="Show(2)" onmouseout="Hidden1(2)"><span><a class="t" href="#">玄幻</a></span></th>
    <th width="93" bgcolor="#FFFF00" scope="col" onmouseover="Show(3)" onmouseout="Hidden1(3)"><span><a class="t" href="#">网游</a></span></th>
    <th width="93" bgcolor="#FFFF00" scope="col" onmouseover="Show(4)" onmouseout="Hidden1(4)"><span><a class="t" href="#">穿越</a></span></th>
</tr>
<tr>
    <td height="94" bgcolor="#FFFFFF" onmouseover="Show(1)" onmouseout="Hidden1(1)">

   <div id="1" >
   <ul>
   <li><a href="#">金列</a></li>
   <li><a href="#">银列</a></li>
   <li><a href="#">同列</a></li>
   <li><a href="#">铁列</a></li>
   </ul>

   </div>

   </td>
    <td bgcolor="#FFFFFF" onmouseover="Showc(2)" onmouseout="Hidden1(2)">
   <div id="2">
   <ul>
   <li><a href="#">金列</a></li>
   <li><a href="#">银列</a></li>
   <li><a href="#">同列</a></li>
   <li><a href="#">铁列</a></li>
   </ul>

   </div></td>
    <td bgcolor="#FFFFFF" onmouseover="Show(3)" onmouseout="Hidden1(3)">

   <div id="3" >
   <ul>
   <li><a href="#">金列</a></li>
   <li><a href="#">银列</a></li>
   <li><a href="#">同列</a></li>
   <li><a href="#">铁列</a></li>
   </ul>

   </div></td>
    <td bgcolor="#FFFFFF" onmouseover="Show(4)" onmouseout="Hidden1(4)">


   <div id="4">
   <ul>
   <li><a href="#">金列</a></li>
   <li><a href="#">银列</a></li>
   <li><a href="#">同列</a></li>
   <li><a href="#">铁列</a></li>
   </ul>

   </div></td>
</tr>
</table>

进度条

<body>
<div id="loadbar" style="background-color:#FFFF00; border:solid 2px #FF0000; width:70%; height:60px; margin:auto">

</div>

</body>
</html>
<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()",50);

   }else{
   location="163.html";

       }

   }

     loadBar();
</script>

电商网络销售是做什么

电商网络销售是做什么

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子惠氏善存片惠氏便秘惠氏国产惠氏学儿乐惠氏纸尿裤惠氏1段价格惠氏公司惠氏1段惠氏启赋惠氏瑞士800g 惠氏铂臻算什么档次惠氏和美赞臣哪个好惠氏金装爱儿乐1段惠氏金装健儿乐惠氏金装膳儿加惠氏制药有限公司惠氏s26金装爱儿乐惠氏孕妇钙片惠氏金装爱儿乐价格惠氏启赋防伪验证区惠氏和美素佳儿哪个好惠氏启赋好不好惠氏奶源是哪里的惠氏是哪国的品牌惠氏是哪里的品牌雅培和惠氏哪个好惠氏善存佳维片价格惠氏babynes怎么样惠氏复合维生素片惠氏dha藻油怎么样惠氏婴儿用品怎么样惠氏孕妇维生素惠氏雅培美赞臣哪个好惠氏dha怎么样惠氏善存价格惠氏妈妈藻油dha 惠氏洗衣液怎么样惠氏妈妈dha藻油惠氏孕妇复合维生素美赞臣和惠氏惠氏幼儿乐怎么样