JS+CSS实现简单滑动门(滑动菜单)效果


Posted in Javascript onSeptember 19, 2015

本文实例讲述了JS+CSS实现简单滑动门的方法。分享给大家供大家参考。具体如下:

这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮、更实用的滑动门做铺垫。

运行效果截图如下:

JS+CSS实现简单滑动门(滑动菜单)效果

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动门测试</title>
<style>
#tab_container1{width:310px;text-align:left;border:1px solid #cccccc;background:url() repeat-x top;}
.cls_tab_nav{height:24px;overflow:hidden;font-size:12px;background:url() repeat-x bottom; padding-left:10px;}
.cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}
.cls_tab_nav_li{background:url() no-repeat -70px 0;width:70px;height:24px;line-height:24px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;}
.cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#000000;font-size:12px;}
.cls_tab_body{border-top:none;min-height:175px;padding:10px;height:175px;}
.cls_div{display:none;font-size:14px;}
.cls_tab_nav_li_first a{color:#c80000;}
</style>
</head>
  <body> 
  <div id="tab_container1" >
 <div class="cls_tab_nav">
 <ul>
  <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">百货大楼</a></li>
  <li class="cls_tab_nav_li"><a href="#">八方购物</a></li>
  <li class="cls_tab_nav_li"><a href="#">商场三</a></li>
 </ul>
 </div>
 <div class="cls_tab_body">
 <div class="cls_div" style="display:block;">
 百货大楼
 </div>
 <div class="cls_div">八方购物</div>
 <div class="cls_div">商场三</div>
 </div>
</div>
</body> 
</html> 
<script type="text/javascript">
try{
 document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
function $(element){
 if(arguments.length>1){
 for(var i=0,elements=[],length=arguments.length;i<length;i++)
  elements.push($(arguments[i]));
 return elements;
 }
 if(typeof element=="string")
 return document.getElementById(element);
 else
 return element;
}
var Class={
 create:function(){
 return function(){
  this.initialize.apply(this,arguments);
 } 
 }
}
Object.extend=function(destination,source){
 for(var property in source){
 destination[property]=source[property];
 }
 return destination;
}
var tabMenu=Class.create();
tabMenu.prototype={
 initialize:function(container,selfOpt,otherOpt){
 this.container=$(container);
  var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
 var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
 //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
 for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){
  if(this.container.childNodes[i].nodeType==1)
  objs.push(this.container.childNodes[i]);
 }
 var tabArray=objs[0].getElementsByTagName("li");
 //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
 var divArray=new Array();
 for(i=0,length=objs[1].childNodes.length;i<length;i++){
  if(objs[1].childNodes[i].nodeType==1)
  divArray.push(objs[1].childNodes[i]);
 }
 for(i=0,length=tabArray.length;i<length;i++){
  tabArray[i].length=length;
  tabArray[i].index=i;
  tabArray[i].onmouseover=function(){
  //其它选项卡样式设置
  for(var j=0;j<this.length;j++){
   tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
   for(var property in selfOptions){
   tabArray[j].firstChild.style[property]=otherOptions[property];
   }
  }
  //当前选项卡样式
  this.style.backgroundPosition="0 0";
  for(var property in selfOptions){
   this.firstChild.style[property]=selfOptions[property];
  }
  //隐藏其它选项卡
  for(j=0;j<this.length;j++){
   divArray[j].style.display="none";
  }
  //显示当前选项卡
  divArray[this.index].style["display"]="block";
  }
 }
 }
}
var tab1=new tabMenu("tab_container1",{fontSize:"12px",color:"#c80000",fontWeight:"bolder"},{fontWeight:"normal",color:"#000000"});
</script>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
jQuery侧边栏实现代码
May 06 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 #Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 #Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 #Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
繁简字转换功能
2006/07/19 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
详解python中docx库的安装过程
2019/11/08 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
J2EE包括哪些技术
2016/11/25 面试题
单位法定代表人授权委托书
2014/09/20 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技