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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
Node.js实现断点续传
Jun 23 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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的XML文件解释类应用实例
2014/09/22 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
中职生自我鉴定范文
2013/10/03 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
社区活动邀请函范文
2014/01/29 职场文书
采购求职信
2014/03/17 职场文书
教职工代表大会主持词
2014/04/01 职场文书
房屋委托书范本
2014/04/04 职场文书
校友回访母校寄语
2015/02/26 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
vue组件vue-esign实现电子签名
2022/04/21 Vue.js