JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下：
这是风格简单的一款JS+CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-style-codes/
具体代码如下：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
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<l;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);
}
}
</script>
<style>
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;}
</style>
<title>myLinks</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="menu">
<ul class="category">
<li class="label label-selected">在线学习</li>
<li class="label">运动休闲</li>
<li class="label">编程社区</li>
<li class="label">文化娱乐</li>
<li class="label">休息项目</li>
<li class="label">人际往来</li>
</ul>
</div>
<div id="linksContent">
<div class="category-1" style="display:block;">
<ul>
<li class="link"><span>html学习</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>人工智能</span></li>
<li class="link"><span>算法设计</span></li>
</ul>
</div>
<div class="category-2" style="display:none;">
<ul>
<li class="link"><span>开车</span></li>
<li class="link"><span>郊游</span></li>
<li class="link"><span>音乐</span></li>
</ul>
</div>
<div class="category-2" style="display:none;">
<ul>
<li class="link"><span>MSDN</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>科幻电影</span></li>
<li class="link"><span>技术文档</span></li>
</ul>
</div>
<div class="category-2" style="display:none;">
<ul>
<li class="link"><span>java学习</span></li>
<li class="link"><span>html学习</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>人工智能</span></li>
<li class="link"><span>算法设计</span></li>
</ul>
</div>
<div class="category-2" style="display:none;">
<ul>
<li class="link"><span>html学习</span></li>
<li class="link"><span>编译原理</span></li>
<li class="link"><span>人工智能</span></li>
</ul>
</div>
<div class="category-2" style="display:none;">
<ul>
<li class="link"><span>java学习</span></li>
<li class="link"><span>html学习</span></li>
<li class="link"><span>算法设计</span></li>
</ul>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<script>
tab($("menu","li"),$("linksContent","div"));
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
javascript 仿QQ滑动菜单效果代码
[程序源码] 复制代码 代码如下: var QQ = function() { // 公用函数 function T$(id) { return document.getElementById(id); } function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } function $extend(des, src) { for(var p in src) { des[p] = src[p];
-
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
PC 移动端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹 门面模式 复制代码 代码如下: window.onload = function() { /*测试数据*/ var insert = ''; for (var i = 0; i < 80; i++) { insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '
-
用原生js做个简单的滑动效果的回到顶部
很多网页在下方都会放置一个"返回顶部"按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果.后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离:再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ... <script type=&
-
基于javascript实现图片滑动效果
今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进. ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap--panel使用了绝对定位,就将translate平移改为了left.改动后,各个浏览器运行的效果不错. 具体代码如下 html代码(没写注释) <div class="container">
-
javascript图片滑动效果实现
本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
JS实现的适合做faq或menu滑动效果示例
本文实例讲述了JS实现的适合做faq或menu滑动效果.分享给大家供大家参考,具体如下: <!CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <meta http-equiv="Content-Type" content="text/html;
-
js通过更改按钮的显示样式实现按钮的滑动效果
通过更改按钮的显示样式,来实现按钮动态滑动 复制代码 代码如下: <!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> &
-
js实现分享到随页面滚动而滑动效果的方法
本文实例讲述了js实现分享到随页面滚动而滑动效果的方法.分享给大家供大家参考.具体如下: 页面向上向下滚动,分享到的模块随着滑动. 要点: 复制代码 代码如下: var scrtop =document.documentElement.scrollTop||document.body.scrollTop; var height = document.documentElement.clientHeight||document.body.clientHeight; var top = scrtop
-
JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影.本菜单在火狐.IE8.Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-
-
JS+CSS实现的经典tab选项卡效果代码
本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
-
JS+CSS实现自动切换的网页滑动门菜单效果代码
本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code
-
js实现的简洁网页滑动tab菜单效果代码
本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab
-
jQuery实现带幻灯的tab滑动切换风格菜单代码
本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g
-
jQuery实现MSN中文网滑动Tab菜单效果代码
本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Msn中文网的滑动滑动门代码,利用jQuery实现的效果,代码很巧妙,就是利用一个绝对定位的层来实现移动效果,但是体验度大幅提升了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <html>
-
js实现点击切换TAB标签实例
本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示 源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
JS+CSS实现TreeMenu二级树形菜单完整实例
本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &
-
使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=