javascript实现多栏闭合展开式广告位菜单效果实例


Posted in Javascript onAugust 05, 2015

本文实例讲述了javascript实现多栏闭合展开式广告位菜单效果。分享给大家供大家参考。具体如下:

从操作方式上来说,有似曾相识的感觉,有点手风琴菜单的味道,像一个折叠面板,用JavaScript和CSS结合来实现,虽然不华丽,但很简洁实用,也算是给喜欢网页特效的朋友们一个可参考素材吧。

运行效果如下图所示:

javascript实现多栏闭合展开式广告位菜单效果实例

具体代码如下:

<!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 相关文章推荐
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 #Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 #Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 #Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 #Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 #Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 #Javascript
You might like
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
js简单抽奖代码
2015/01/16 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python求众数问题实例
2014/09/26 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
深入浅出学习python装饰器
2017/09/29 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
python为什么要安装到c盘
2020/07/20 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
春节活动策划方案
2014/01/24 职场文书
担保书格式及范文
2014/04/01 职场文书
说明书范文
2014/05/07 职场文书
领导班子对照检查材料
2014/09/22 职场文书
病危通知书样本
2015/04/17 职场文书
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers