JS实现漂亮的淡蓝色滑动门效果代码


Posted in Javascript onSeptember 23, 2015

本文实例讲述了JS实现漂亮的淡蓝色滑动门效果。分享给大家供大家参考。具体如下:

这款漂亮淡蓝色滑动门代码,感觉很不错哦。

运行效果截图如下:

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 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= "3water.com"+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程序设计有所帮助。

Javascript 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
解析Vue.js中的组件
Feb 02 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
js实现验证码功能
Jul 24 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
jQuery Validate验证框架经典大全
Sep 23 #Javascript
Javascript实现的简单右键菜单类
Sep 23 #Javascript
js实现无限级树形导航列表效果代码
Sep 23 #Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 #Javascript
JS实现3D图片旋转展示效果代码
Sep 22 #Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 #Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 #Javascript
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
WINXP下apache+php4+mysql
2006/11/25 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python dict的常用方法示例代码
2020/06/23 Python
python opencv肤色检测的实现示例
2020/12/21 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
总经理职责
2013/12/22 职场文书
运动会通讯稿500字
2014/02/20 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
文书工作总结(范文)
2019/07/11 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Python OpenGL基本配置方式
2022/05/20 Python