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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
javascript中indexOf技术详解
May 07 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python和php学习哪个更有发展
2020/06/17 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
军训的自我鉴定
2013/12/10 职场文书
教师自我评价范文
2013/12/16 职场文书
七年级历史教学反思
2014/02/05 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
担保书怎么写 ?
2019/04/22 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
php解析非标准json、非规范json的方式实例
2022/05/10 PHP