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 相关文章推荐
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
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 分页函数multi() discuz
2009/06/21 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php连接mysql数据库
2017/03/21 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
常用jQuery代码分享
2015/07/14 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python实现远程控制电脑
2019/05/23 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python实现学生信息管理系统源码
2021/02/22 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
运动会入场解说词
2014/02/07 职场文书
研修第一天随笔感言
2014/02/15 职场文书
双语教学实施方案
2014/03/23 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
街道务虚会发言材料
2014/10/20 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
Python 正则模块详情
2021/11/02 Python