JS实现漂亮的淡蓝色滑动门效果代码
本文实例讲述了JS实现漂亮的淡蓝色滑动门效果。分享给大家供大家参考。具体如下：
这款漂亮淡蓝色滑动门代码，感觉很不错哦。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/
具体代码如下：
<!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 runat="server">
<title>漂亮淡蓝色滑动门代码</title>
<style type="text/css">
body
{
font-size:12px;
}
.normal
{
list-style: none; float: left;
padding: 5px 2px 2px 2px;
width: 90px; text-align :center ;
vertical-align :middle ;
cursor :pointer ;
border-bottom :solid 1px #9cd9f5;
border-right :solid 1px #9cd9f5;
background-color: #dee7f5;
border-collapse :separate ;
}
.selected
{
list-style: none;
float: left;
padding: 5px 2px 2px 2px;
width: 90px;
text-align :center ;
vertical-align :middle ;
cursor :pointer ;
border-bottom :solid 0px #9cd9f5;
border-right :solid 1px #9cd9f5;
background-color:#f8f8f8 ;
}
#divMainTab
{
border-left :solid 1px #9cd9f5;
border-top :solid 1px #9cd9f5;
float:left;
margin: 0px; padding: 0px
}
.divContent
{
width: 474px;
height: 400px;
clear: both;
border-bottom: solid 1px #9cd9f5;
border-left: solid 1px #9cd9f5;
border-right: solid 1px #9cd9f5;
}
a{
text-decoration: none;
color: #00ccff;
}
a:hover
{
text-decoration: underline;
color: #cc0000;
}
</style>
<script language="javascript" type="text/javascript">
function changeTab(index)
{
for (var i=1;i<=5;i++)
{
document.getElementById ("li_"+i).className ="normal";
document.getElementById ("li_"+index).className ="selected";
document.getElementById ("div"+i).style.display ="none";
}
document.getElementById ("div1").innerText= "www.jb51.net"+index;
document.getElementById ("div"+index).style.display ="block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divMainTab">
<ul style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;">
<li id="li_1" class="selected" onmouseover="changeTab('1')"><a href="#">最新更新</a> </li>
<li id="li_2" class="normal" onmouseover="changeTab('2')"><a href="#">阅读排行</a> </li>
<li id="li_3" class="normal" onmouseover="changeTab('3')"><a href="#">本月排行</a> </li>
<li id="li_4" class="normal" onmouseover="changeTab('4')"><a href="#">本日排行</a> </li>
<li id="li_5" class="normal" onmouseover="changeTab('5')"><a href="#">我们</a> </li>
</ul>
</div>
<div id="div1" style ="display :block" class ="divContent">
1号
</div>
<div id="div2" style ="display :none" class ="divContent">
2号
</div>
<div id="div3" style ="display :none" class ="divContent">
3号
</div>
<div id="div4" style ="display :none" class ="divContent">
4号
</div>
<div id="div5" style ="display :none" class ="divContent">
5号
</div>
</div>
</form>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关推荐
-
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造自适应宽度的圆角滑动门,这里的圆角主要是靠一张背景图片去实现,所指的宽度是滑动门上的导航的宽度,不管文字有多少,它都会一直顺着下去,不会被内容所撑破,兼容性方面,兼容IE6/7/8,火狐未试,应该也兼容 . 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-codes/ 具体代
-
JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一个"门"的内容存入JS数组中,这样可以减少代码量,但也带来了一个扩展的问题,扩展性方面有待完善,仅供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-zxhd-menu-demo/
-
JS仿淘宝实现的简单滑动门效果代码
本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL
-
js实现左侧网页tab滑动门效果代码
本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY
-
JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮.更实用的滑动门做铺垫. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如下: <!DOC
-
JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代
-
JS实现同一个网页布局滑动门和TAB选项卡实例
本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡.分享给大家供大家参考.具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体
-
JS+CSS实现简易的滑动门效果代码
本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
-
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滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款滑动门代码,简洁TAB,简单的鼠标导航效果,大家或许经常见到的效果啦,鼠标放在主菜单上,下边框架内的内容会跟着变换,鼠标不需要点击,只需要滑上去就可切换内容,像一扇门,所以有时候别人叫"滑动门"菜单. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/ 具体代码如下: <html&
-
JS将滑动门改为选项卡（需鼠标点击）的实现方法
本文实例讲述了JS将滑动门改为选项卡(需鼠标点击)的实现方法.分享给大家供大家参考.具体如下: 大家都知道,滑动门和选项卡在布局和结构方面几乎是一样的,唯一不同的是触发方式,这个是由JavaScript决定的,大致来讲就是将onmouseover改为onclick就行了,本款选项卡以前是款比较流行的滑动门,现在改成了选项卡,大家看看有什么区别. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hdm-2-nav-tab-style-demo
-
JS实现滑动门效果的方法详解
本文实例讲述了JS实现滑动门效果的方法.分享给大家供大家参考,具体如下: 描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌,效果图如下: 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未显露的部分) 3.绑定鼠标滑过事件 window.onload=function(){ var box=document.getElementById("box"); var img=box.getEl