html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下:
这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
var $=function(a,b){
var ID = document.getElementById(a);
var OBJ= (b)?ID.getElementsByTagName(b):ID;
return OBJ
}
var n=0;
var tab = function(MENU,BODY){
var l = MENU.length;
for(var i=0;i
MENU[i].onmouSEOver=function(a){
return function(){
MENU[n].className="label"
BODY[n].style.display = "none";
MENU[a].className="label label-selected";
BODY[a].style.display = "block";
n=a;
}
}(i);
}
}
body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;}
.label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
myLinks
- 在线学习
- 运动休闲
- 编程社区
- 文化娱乐
- 休息项目
- 人际往来
- html学习
- 编译原理
- 人工智能
- 算法设计
- 开车
- 郊游
- 音乐
- MSDN
- 编译原理
- 科幻电影
- 技术文档
- java学习
- html学习
- 编译原理
- 人工智能
- 算法设计
- html学习
- 编译原理
- 人工智能
- java学习
- html学习
- 算法设计
tab($("menu","li"),$("linksContent","div"));
希望本文所述对大家的javascript程序设计有所帮助。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果相关推荐
- jq加css制作图片切换,jQuery+css实现的切换图片功能代码
本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo body { margin:0; padding:0; } . ...
- css动画之旅--弹性菜单效果
今天学习了一个css实现弹性菜单的效果,感觉还不错. 闲话不说,直接上代码.... 下面是页面的HTML代码: 1 <div class="menu"> 2 <d ...
- HTML+CSS+JavaScript实现下拉菜单效果
实现思路: HTML 方面,导航栏的每个 <li> 元素里面包含 <a> 和 <ul> ,将 <li> 设置为相对定位, 将 <ul> 设置 ...
- 如何用HTML和css实现简单的手风琴菜单效果,附带详细注释
超完整的代码+详细注释,适合给小白做的简单的手风琴菜单实例 代码: <!DOCTYPE html> <html lang="en"><head> ...
- html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变 效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
- js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页
HTML.CSS 和 JavaScript 是前端编程密不可分的三大语言,我们一般看到的网页都由这三种语言组合编程而成.这三者之间究竟有什么样的关系?他们又是通过什么样的软件编成的呢? 目录 1. H ...
- css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
最新文章
- 计算机应用基础形成性考核册答案,2019年最新(电大秋)计算机应用基础形成性考核册题目及答案.doc...
- 新手必看的编程介绍,帮你推荐学习方案!
- 微服务架构的核心要点和实现原理
- python的Web编程
- 001 makefile的使用
- keepalived实现高可用nginx反向代理的简单案例
- mac 串口调试工具_MACamp;串口调试
- UI设计实用临摹素材|APP设计的信息可视化!
- win7 32位系统安装postmant无法正常启动。启动显示黑屏界面
- Hadoop 调研笔记
- npm install 报错(npm ERR! errno 1)
- Android 高效安全加载图片
- HDU 6045 Is Derek lying?
- PCB各层的含义(讲的非常易懂清晰)
- 链游时代来临!1周12款游戏与公有区块链MagnaChain签约上链
- 最大流 edmonds carp
- oracle中numeric是什么类型,numeric
- 弘辽科技:淘宝开店可以卖不同类型产品吗?会有问题吗?
- r7c刷机android6.0,OPPO R7电信版R7c官方固件刷机包rom线刷包(Root权限+驱动)
- 神锁离线版插件的安全设计