jquery仅用6行代码实现滑动门效果


Posted in Javascript onSeptember 07, 2015

本文实例讲述了jquery仅用6行代码实现滑动门效果。分享给大家供大家参考。具体如下:

这是一个基于jQuery的滑动门导航栏,仅6行代码,不知还有没有比此更少的代码了,在滑动门的实现过程中,用背景图片修饰了每个“门”的背景,更美观漂亮,有着极好的用户操作体验。

运行效果如下图所示:

jquery仅用6行代码实现滑动门效果

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 6行代码实现滑动门</title>
<style>
*{margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px}
.ts{ width:50%; margin:0 auto}
.ts .tsHead{clear:both; height:27px;background:url(images/titLine.gif) repeat-x left bottom; border-left:1px solid #88AAD6; border-right:1px solid #88AAD6; border-top:1px solid #88AAD6}
.ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(images/titLeft.gif) no-repeat}
.ts .titOp{float:left; height:21px; padding:5px 0 0}
.ts .titOp li{ float:left; width:100px;height:15px; padding:5px 0 0; margin:0 0 0 3px;border:1px solid #88AAD6; border-bottom:1px solid #fff;background:#eeeeff; color:#999;text-align:center; cursor:default}
.ts .titOp li.current{ background:#fff;color:#290052; }
.ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(images/titRight.gif) no-repeat}
.ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}
.ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
  $("#tsMb div:not(:first)").hide();
  $("#titOp li").each(function(index){
    $(this).mouseover(
     function(){
     $("#titOp li.current").removeClass("current");
     $(this).addClass("current");
     $("#tsMb > div:visible").hide();
     $("#tsMb div:eq(" + index + ")").show();
    })
  })
})
</script>
</head>
<body>
 <div style="clear:both; height:30px"></div>
 <!--调试层-->
 <div class="ts">
     <div class="tsHead">
         <div class="titLeft"></div>
         <div class="titOp" id="titOp">
          <ul>
             <li class="current">脚本调试器</li>
             <li>样式调试器</li>
             <li>DOM调试器</li>
            </ul>
         </div>
         <div class="titRight"></div>
     </div>
     <div class="line">sadfasdfsd</div>
     <div class="tsMb" id="tsMb">
       <div>脚本</div>
       <div>样式</div>
       <div>DOM</div>
     </div>
 </div>
 <!--调试层 end-->
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 #Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 #Javascript
jQuery实现简单下拉导航效果
Sep 07 #Javascript
JS实现弹性菜单效果代码
Sep 07 #Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 #Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
关于JS中prototype的理解
Sep 07 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
PHP的面向对象编程
2006/10/09 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
详解Python中namedtuple的使用
2020/04/27 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
任意存:BOXFUL
2018/05/21 全球购物
数控技术专业推荐信
2013/11/01 职场文书
秋季运动会稿件
2014/01/30 职场文书
大二自我鉴定
2014/01/31 职场文书
老师对学生的评语
2014/04/18 职场文书
真诚的求职信
2014/07/04 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
爱情保证书
2015/01/17 职场文书
专家推荐信怎么写
2015/03/25 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL