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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
原生js实现日期联动
Jan 12 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
js实现碰撞检测
Jan 29 Javascript
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
php比较两个字符串长度的方法
2015/07/13 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Django单元测试工具test client使用详解
2019/08/02 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
毕业生自荐书
2014/02/02 职场文书
食品工程专业求职信
2014/06/15 职场文书
法定代表人证明书
2014/11/28 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
给老婆的道歉信
2015/01/20 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2019求职信大礼包
2019/05/15 职场文书