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获取dom的下一个节点方法
Sep 05 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
原生js+ajax分页组件
Jan 30 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vue实现学生信息管理系统
May 30 Javascript
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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
提取HTML标签
2006/10/09 PHP
PHP 字符串操作入门教程
2006/12/06 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
2014年三八妇女节活动总结
2014/03/01 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
严以用权学习心得体会
2016/01/12 职场文书