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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
jQuery原生的动画效果
Jul 10 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
漂亮但不安全的CTB
2006/10/09 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php生成动态验证码gif图片
2015/10/19 PHP
linux下php上传文件注意事项
2016/06/11 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
常用DOM整理
2015/06/16 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python中返回矩阵的行列方法
2018/04/04 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
详解小白之KMP算法及python实现
2019/04/04 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
毕业生如何写自荐信
2014/03/26 职场文书
实习协议书范本
2014/09/25 职场文书
企业年会祝酒词
2015/08/11 职场文书