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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 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 的几个配置文件函数
2006/12/21 PHP
php无序树实现方法
2015/07/28 PHP
调试php程序的简单步骤
2019/10/04 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
Jquery遍历节点的方法小集
2014/01/22 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python自带的http模块详解
2016/11/06 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python实现调度算法代码详解
2017/12/01 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
小区门卫管理制度
2014/01/29 职场文书
师德学习感言
2014/01/31 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
继承权公证书范本
2015/01/23 职场文书
监理中标通知书
2015/04/16 职场文书