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 相关文章推荐
简单的js分页脚本
May 21 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
JavaScript中的Function函数
Aug 27 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
Angular的MVC和作用域
Dec 26 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
vue项目中openlayers绘制行政区划
Dec 24 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
php短域名转换为实际域名函数
2011/01/17 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序实现下拉框功能
2019/07/16 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python实现简单登陆系统
2018/10/18 Python
简单了解django索引的相关知识
2019/07/17 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python之随机数函数的实现示例
2020/12/30 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
语文教研活动总结
2014/07/02 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
公开致歉信
2019/06/24 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python