仿163首页的广告收缩效果/菜单滑动/进度条
2012-02-23 19:53
344 查看
首页的广告收缩效果
<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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现防163首页的广告收缩效果
- 用javascript仿163首页的广告收缩效果~~~~~~
- 仿163首页的广告收缩效果
- javascript:(滑动选项卡、进度条、广告收缩效果、滑动的下拉菜单)案例
- 仿163首页广告伸缩效果
- 滑动展开-收缩广告代码实例效果
- 仿糯米首页菜单左右滑动效果
- JQuery实现QQMenu菜单收缩滑动效果
- ListView滑动菜单，类似于QQ5.0中的效果
- Android实现顶部导航菜单左右滑动效果
- 仿path首页滑动效果
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- Android Scroll滑动效果精炼详解第（二）课：ViewDragHelper和简单实现QQ首页滑动效果
- Android 高仿微信（QQ）滑动弹出编辑、删除菜单效果，增加下拉刷新功能
- 用javascript实现仿163的js广告向下挤压页面的效果
- Android实现导航菜单左右滑动效果
- Android实现导航菜单左右滑动效果
- JS+CSS实现大气清新的滑动菜单效果代码