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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
了解JavaScript中的选择器
May 24 Javascript
Javascript confirm多种使用方法解析
Sep 25 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php中cookie的使用方法
2014/03/29 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
express 项目分层实践详解
2018/12/10 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python类的用法实例浅析
2015/05/27 Python
python分割列表(list)的方法示例
2017/05/07 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python能做什么 python的含义
2019/10/12 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
EJB面试题
2015/07/28 面试题
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
会计核算科岗位职责
2014/03/19 职场文书
超市活动计划书
2014/04/24 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书