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图表动画插件Highcharts Examples
Apr 16 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
js切换光标示例代码
2013/10/10 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python基础教程项目三之万能的XML
2018/04/02 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
安全伴我行主题班会
2015/08/13 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python