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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
Javascript倒计时代码
Aug 12 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
实现无刷新联动例子汇总
May 20 Javascript
javascript self对象使用详解
Oct 18 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
php实现文章评论系统
2019/02/18 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
Angular2整合其他插件的方法
2018/01/20 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
python实现微信打飞机游戏
2020/03/24 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
企业军训感言
2014/02/08 职场文书
企业安全生产承诺书
2014/05/22 职场文书
财务审计整改报告
2014/11/06 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
微信小程序基础教程之echart的使用
2021/06/01 Javascript