javascript实现多栏闭合展开式广告位菜单效果实例
作者：皮蛋 发布时间：2024-04-29 14:07:44
标签：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程序设计有所帮助。
0
投稿猜你喜欢
1.设置Headers有些网站不会同意程序直接用上面的方式进行访问，如果识别有问题，那么站点根本不会响应，所以为了完全模拟浏览器的工作，我们- 前端开发部门在壮大，人员在增加，技术在进步。CSSer虽然不能代表前端开发团队，但CSSer是前端开发中非常重要的组成部分。一、文档写程序的
- PHP SESSION 的存储Session会话存储方式PHP将session以文件的形式存储服务器的文件中，session.save_pa
- 网络下载的python代码，版本参差，从python2.x迁移python3.x的过程中，存在print语法问题，即python2.x中pr
- 本文实例为大家分享了Bootstrap导航条实现的具体代码，供大家参考，具体内容如下navbar-header：导航的头部，一般情况下用来放
- vue项目依赖升级报错处理1.Vue Router 升级到3.5.1报错：Navigation cancelled from "/
- 1）视频读取import cv2cap = cv2.VideoCapture('E:\\Video\\20000105_224116
- 为了提高工作效率（偷懒），用python去解决。工作需要，需要将excel文件转化为csv文件，要是手工的一个个去转换，每个sheet页不但
- 任何事情都是由量变到质变的过程，学习Python也不例外。只有把一个语言中的常用函数了如指掌了，才能在处理问题的过程中得心应手，快速地找到最
- 实验介绍增量恢复一般适用的场景：1、人为的sql语句破坏了数据库2、在进行下一次完全备份之前发生系统故障导致数据库数据丢失3、在主从架构中，
- 非常简单的函数，但是官网的介绍令人（令我）迷惑，所以稍加解释。 mask_select会将满足mask（掩码、遮罩等等，随便翻译）的指示，将
- 前言所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务，也就是用户可以在边输入的同时边看到提示的信息（其实是查询出来匹配
- 开发网站，往往需要用数据库保存数据。我们该如何创建数据库与创建数据表呢？方法其实很简单，下面就由小编教你如何用Navicat for MyS
- linux系统使用python获取cpu信息脚本分享#!/usr/bin/env Pythonfrom __future__ import
- 本文实例为大家分享了python实现决策树的具体代码，供大家参考，具体内容如下算法优缺点：优点：计算复杂度不高，输出结果易于理解，对中间值缺
- 装饰器(Decorators)装饰器是这样一种设计模式：如果一个类希望添加其他类的一些功能，而不希望通过继承或是直接修改源代码实现，那么可以
- //--------------------弹出层------------------- //popDivId:弹出层div的ID //dr
- 背景有时本地服务器的时间不准了，需要同步互联网上的时间。解决方案NTP时间同步，找到一些可用的NTP服务器进行同步即可。通过获取一些大型网站
- 简介这篇博客涉及的脚本用来将bag文件批量转化为mp4文件dockerfileFROM osrf/ros:kinetic-desktop-f
- 基本介绍图像的全景拼接，即“缝合”两张具有重叠区域的图来创建一张全景图。其中用到了计算机视觉和图像处理技术有：关键点检测、局部不变特征、关键
