您的位置：首页 > Web前端 > JavaScript

js展开菜单效果（一）

2016-09-11 16:08 99 查看

前言：

废话不多说了，内容很简单。一个是点击展开效果，一个是展示广告然后定时关闭效果。后续写一个JD的二级菜单展示。

<!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 charset = UTF-8>
<title>test</title>
<script>
</script>
<style type="text/css" rel = "stylesheet">
body{
margin:0;
padding:0;
}
h1,h2{
margin: 0;
padding: 0;
}
/*  展开次级选项
#main-page{
width: 300px;
margin:0 auto;
border:1px solid #8f8f8f;
}
#hide-page{
display: none;
}
#wrap{
margin: 0;
text-align: center;
}
#wrap a:link{
font-size: 1rem;
color:#fff;
background-color: #8f8f8f;
text-decoration: none;
padding:1px;
}
#wrap a:hover{
background-color: blue;
}*/

/***************************************/

/*定时展开收起sina首页
#main-page{
width: 300px;
margin: 0 auto;
background-color: #8f8f8f;
text-align: center;
overflow: hidden;
}
#ad{
width: 300px;
padding: 5px 0;
text-align: center;
background-color: #e8e8e8;
margin: 0 auto;
}*/
</style>
<script type="text/javascript">

//展开次级选项
// window.onload = function(){
//   var isShow = false;
//   var btn = document.getElementById("btn");
//   var hidePage = document.getElementById("hide-page");
//   btn.onclick = function(){
//     if(isShow == false){
//       btn.innerHTML = "收起选项";
//       hidePage.style.display = "block";
//       isShow = true;
//     }
//     else{
//       btn.innerHTML = "更多选项";
//       hidePage.style.display = "none";
//       isShow = false;
//     }
//   }
// }

/************************************************************************************/

//定时展开收起sina首页,这里return语句不可少，否则形成无限循环，达不到效果。
// window.onload = function(){
//   var ad = document.getElementById("ad");
//   var mainPage = document.getElementById("main-page");
//   var h = 0;
//   function increaseHeight(){
//     if(h < 300){
//       mainPage.style.height = h + "px";
//       h += 5;
//     }
//     else{
//       return;
//     }
//     setTimeout(increaseHeight,10);
//   }
//   function decreaseHeight(){
//     if(h > 0){
//       h -= 5;
//       mainPage.style.height = h + "px";

//     }
//     else{
//       return;
//     }
//     setTimeout(decreaseHeight,10);
//   }
//   increaseHeight();
//   setTimeout(decreaseHeight,5000);
// }
</script>
</head>
<body>
<!--     <div id = "main-page">
<p>手机-精选</p>
<p>网络：移动4G 联通3G</p>
<div id = "hide-page">
<p>价格：5000以上</p>
<p>特点：JDphone价格 "0"元购机计划</p>
</div>
</div>
<p id="wrap">
<a id="btn" href = "javascript:">更多选项</a>
</p> -->
<div id = "main-page">
<h1>欢迎光临</h1>
<h2>广告部分</h2>
</div>
<div id = "ad">广告</div>
</body>
</html>

总结：

在定时效果中，实际上用动画会好得多，这种方法吃力不讨好，而且return语句是不能少的。

另外，用JQ或者CSS3都会非常简单。知识储备还是得越丰富越好。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航