实现滑动选项卡：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style type="text/css">
ul{
list-style-type:none;
margin-left:-40px;
width:450px;
position:relative;
}
ul li{
padding:5px;
float:left;
width:80px;
display:block;
border-style:solid;
border-width:1px;
/*margin:定义选项之间的距离*/
margin:0px 2px 0px 0px;
}
#L1{
background-color:#9CC;
border-color:#C39;
border-bottom-color:#9CC;
}
#L2{
background-color:#CC9;
border-color:#309;
border-bottom-color:#CC9;
}
#L3{
background-color:#FF3;
border-color:#360;
border-bottom-color:#FF3;
}
div{
width:300px;
height:120px;
position:absolute;
top:45px;
}
#d1{
background-color:#9CC;
border:1px solid #C39;
border-top-color:#9CC;
}
#d2{
background-color:#CC9;
border:1px solid #309;
border-top-color:#CC9;
display:none;
}
#d3{
background-color:#FF3;
border:1px solid #360;
border-top-color:#FF3;
display:none;
}
</style>
<script type="text/javascript">
function getTab(now){
for(var i=1;i<4;i++){
if(i==now){
document.getElementById("d"+i).style.display="block";
}else{
document.getElementById("d"+i).style.display="none";
}
}
}
</script>
</head>
<body>
<ul>
<li id="L1" οnmοusemοve="getTab(1)">数码手机</li>
<li id="L2" οnmοusemοve="getTab(2)">家用电器</li>
<li id="L3" οnmοusemοve="getTab(3)">品牌服装</li>
</ul>
<div id="d1">这里是手机数码</div>
<div id="d2">这里是家用电器</div>
<div id="d3">这里是品牌服饰</div>
</body>
</html>
---------------------------------------------------------------------
实现以下仿163首页的广告收缩效果
思路：
1、得有两个DIV，分为上下两部分，上面div的id=top,下面正文
部分的id=content。
2、设置div之间的样式,并且我们让top的高度不断地增加
3、当top的高度增加到一定的时候，停止增加，延迟3秒
4、把top部分进行收缩,当height=0,停止收缩
<style type="text/css">
#top{
position:relative;
}
#content{
position:absolute;
}
</style>
</head>
<body style="margin:0px 0px;" οnlοad="moveDown()">
<div id="top" style="width:100%;height:100px;
background-color:#F96;">网页的广告部分</div>
<div id="content" style="width:100%;height:500px;background-color:#FF3;">这是网页正文部分</div>
</body>
</html>
<script type="text/javascript">
//定义要移动的距离
var h=0;
var maxheight=300;
var st;
var top=document.getElementById("top");
//var content=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(){
//alert(h);
//设置
h-=2;
//设置层高度等于我们累加的值
top.style.height=h;
//设置层显示
top.style.display="block";
if(h<=0){
top.style.display="none";
//清空定时器
clearTimeout(st);
setTimeout("moveDown()",3000);
}else{
//如果h>0,则继续收缩
st=setTimeout("moveUp()",50);
}
}
</script>
--------------------------------------------------
实现js的进度条
1、设置进度显示的样式
2、计算百分比
3、显示到固定的位置
<script type="text/jscript">
//要显示的数字
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="js-shousuo-163.html";
}
}
</script>
</head>
<body οnlοad="loadBar()">
<div id="loadbar" style="border:dashed 1px #F00; width:350px;height:20px; margin:auto;">
</div>
</body>
----------------------------------------------------
滑动的下拉菜单
思路
1、定义CSS
2、实现Div显示和隐藏
当鼠标移动到类别上时，显示该类别所对应的子菜单
其他的全部隐藏掉!
<style type="text/css">
div{
display:none;
}
ul{
margin-top:0px;
list-style-type:none;
background-color:#CCC;
}
li{
width:100px;
display:block;
padding:2px 0px 2px 0px;
}
li a{
color:#666;
text-decoration:none;
padding:2px 0px 2px 0px;
}
li a:hover{
color:#00F;
background-color:#FF0;
display:block;
border-style:solid;
border-width:2px;
border-color:#0C0;
}
span a{
text-decoration:none;
}
span a:hover{
color:yellow;
}
</style>
<script type="text/javascript">
function Show1(dnum){
document.getElementById(dnum).style.display="block";
}
function Hidden1(dnum){
document.getElementById(dnum).style.display="none";
}
</script>
</head>
<body>
<table border="0">
<tr>
<td width="150" align="center" bgcolor="#FF0033" οnmοuseοver="Show1(1)" οnmοuseοut="Hidden1(1)"><span><a href="#">武侠类</a></span></td>
<td width="150" align="center" bgcolor="#FF0033" οnmοuseοver="Show1(2)" οnmοuseοut="Hidden1(2)"><span><a href="#">玄幻类</a></span></td>
<td width="150" align="center" bgcolor="#FF0033" οnmοuseοver="Show1(3)" οnmοuseοut="Hidden1(3)"><span><a href="#">情感类</a></span></td>
<td width="150" align="center" bgcolor="#FF0033" οnmοuseοver="Show1(4)" οnmοuseοut="Hidden1(4)"><span><a href="#">都市类</a></span></td>
</tr>
<tr>
<td οnmοuseοver="Show1(1)" οnmοuseοut="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 οnmοuseοver="Show1(2)" οnmοuseοut="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 οnmοuseοver="Show1(3)" οnmοuseοut="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 οnmοuseοver="Show1(4)" οnmοuseοut="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>
-------------------------------------------------------------------------
------------------------------------------------------------------
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
