javascript实现多栏闭合展开式广告位菜单效果实例
更新时间：2015年08月05日 17:27:20 作者：皮蛋
这篇文章主要介绍了javascript实现多栏闭合展开式广告位菜单效果,可实现类似手风琴切换展示效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了javascript实现多栏闭合展开式广告位菜单效果。分享给大家供大家参考。具体如下：
从操作方式上来说，有似曾相识的感觉，有点手风琴菜单的味道，像一个折叠面板，用JavaScript和CSS结合来实现，虽然不华丽，但很简洁实用，也算是给喜欢网页特效的朋友们一个可参考素材吧。
运行效果如下图所示：
具体代码如下：
<!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?0:index;
play(index);
},autoTime);
}
//自动切换停止
function stopAuto(){
clearInterval(timer);
}
//启动自动切换
startAuto()
}
window.onload=function(){
newSlider();
}
//-->
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
javascript基础知识之html5轮播图实例讲解（44）
这篇文章主要为大家详细介绍了javascript基础知识之html5轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了JavaScript实现计数器的基础方法2017-10-10
，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本篇文章给大家介绍js模块规范之AMD规范和CMD规范，模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式，对js amd cmd规范感兴趣的童鞋可以来本文学习2015-10-10
本文主要介绍了js, jQuery实现全选、反选功能的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了JS实现简易留言板，节点进行操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了JavaScript实现数组在指定位置插入若干元素的方法,涉及javascript中splice方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了canvas实现手机端用来上传用户头像的代码代码简单易懂非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-10-10
这篇文章主要给大家介绍了关于VSCode中如何利用d.ts文件进行js智能提示的相关资料，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2018-04-04
这篇文章主要介绍了JS实现的鼠标跟随代码,带有卡通手型点击效果.涉及JavaScript鼠标事件的响应与页面元素的动态调用技巧,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时，格式如4天7小时58分钟39秒，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论