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 相关文章推荐
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
使用async await 封装 axios的方法
Jul 09 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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云打印类完整示例
2016/10/15 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
js 数组操作代码集锦
2009/04/28 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
php 修改密码实现代码
2017/05/24 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python GUI计算器的实现
2020/10/09 Python
python中的插入排序的简单用法
2021/01/19 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
我为自己代言广告词
2014/03/18 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
给校长的建议书范文
2015/09/14 职场文书
部分武汉产收音机展览
2022/04/07 无线电
Go语言编译原理之变量捕获
2022/08/05 Golang