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 相关文章推荐
popdiv
Jul 14 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 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的CMS中展示文章类实例分析
2015/06/18 PHP
php DES加密算法实例分析
2019/09/18 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
jQuery技巧总结
2011/01/01 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
vscode调试node.js的实现方法
2020/03/22 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python assert关键字原理及实例解析
2019/12/13 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
初入社会应届生求职信
2013/11/18 职场文书
一年级家长会邀请函
2014/01/25 职场文书
承诺书范文
2014/06/03 职场文书
村官个人总结范文
2015/03/03 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技