Javascript implementation example of multi-column closed and expandable advertising space menu effect

Javascript implementation example of multi-column closed and expandable advertising space menu effect_javascript skills

WBOY

Release： 2016-05-16 15:47:01

Original

1320 people have browsed it

The example in this article describes the implementation of multi-column closed and expanded ad space menu effects using JavaScript. Share it with everyone for your reference. The details are as follows:

In terms of the operation method, it has a familiar feeling, a bit like an accordion menu, like a folding panel, implemented with JavaScript and CSS. Although not gorgeous, it is very simple and practical, and it is also suitable for friends who like web page special effects. Let us have a reference material.

The operation effect is as shown below:

The specific code is as follows:

<!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>
<title>多栏闭合展开式广告位（菜单）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
* {margin:0; padding:0; font-size:12px;}
ul,li { list-style:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
#dd { width:303px; height:80px; margin:50px auto 0 auto; border:1px solid #ccc; border-right:none; overflow:hidden;}
#dd li { float:left; width:50px; height:80px; overflow:hidden;border-right:1px solid #ccc;}
#dd li span { width:50px; display:inline-block; text-align:center; line-height:80px;}
#dd li p { width:150px; display:inline-block;}
#dd li.on { width:200px;}
#ii { width:303px; margin:5px auto 0 auto;}
#ii li { float:left; width:10px; height:10px; margin:0 1px; background:#ccc; text-align:center; line-height:10px; cursor:pointer;}
#ii li.on{ background:#6CF;}
-->
</style>
</head>
<body>
<ul id="dd" class="clearfix">
 <li><span>表一</span><p>常用ASP函数大全<br />学习必备资料</p></li>
 <li><span>表二</span><p>十大jquery特效<br />惊天秘密，不容错过</p></li>
 <li><span>表三</span><p>Ajax交互改革<br />Ajax带给你空前体验</p></li>
</ul>
<ul id="ii" class="clearfix">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script type="text/javascript">
<!--
 function newSlider(){
 var dl=document.getElementById("dd").getElementsByTagName("li");
 var il=document.getElementById("ii").getElementsByTagName("li");
 var dlen = dl.length;
 var timer = null,index = 0,autoTime = 3000;
 //timer定时器，index当前显示的是第几个，autotime自动切换时间
 dl[0].className="on",il[0].className="on";
 //切换函数
 function play(j){
  index = j;
  stopAuto();//停止计时
  for (var i=0;i<dlen ;i++ ){
  dl[i].className="";
  il[i].className="";
  }
  dl[j].className="on";
  il[j].className="on";
  startAuto();//重新开始计时
 }
 //mouseover表切换
 for ( var i=0;i<dlen ;i++ ){
  dl[i].onmouseover=function(j){
  return function(){play(j);}
  }(i)
 }
 //click按钮切换
 for ( var i=0;i<dlen ;i++ ){
  il[i].onclick=function(j){
  return function(){play(j);}
  }(i)
 }
 //自动切换开始
 function startAuto(){
  timer = setInterval(function(){
  index++;
  index = index>dlen-1&#63;0:index;
  play(index);
  },autoTime);
 }
 //自动切换停止
 function stopAuto(){
  clearInterval(timer);
 }
 //启动自动切换
 startAuto()
 }
window.onload=function(){
newSlider();
}
//-->
</script>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.