jquery实现TAB选项卡鼠标经过带延迟效果的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了jquery实现TAB选项卡鼠标经过带延迟效果的方法。分享给大家供大家参考。具体如下:

如果你想实现鼠标停留在DIV上面N秒后才执行某些函数,或者类似下面的TAB切换时不经过之间的显示,用下面的方法可以实现。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hoverTAB有延迟显示的效果</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;font-size:12px;}
.mytab { background: #007373; width: 600px; margin-top: 100px; margin-right: auto; margin-left: auto; height: 230px; }
.mytab .title li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background: #099; border: 1px solid #FFF; margin-left: 14px; margin-top: 14px; }
.mytab .content li { line-height: 200px; text-align: center; height: 200px; width: 600px; clear: both; }
.mytab .title li.cur { color:#000; background: #FFF; font-weight: bold; border: 1px solid #000; }
a { color:#FFF}
.mytab .title li.cur a{ color:#000;}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
var t_li = $(".mytab .title li")
var c_li = $(".mytab .content li")
t_li.hover(function(){
var i = t_li.index($(this));
function way(){
t_li.removeClass("cur").eq(i).addClass("cur");
c_li.hide().eq(i).show();
}
timer=setTimeout(way,500);
},function(){
clearTimeout(timer);
});
});
</script>
</head>
<body>
<div class="mytab">
 <ul class="title">
  <li class="cur"><a href="/php/" target="_blank">PHP教程</a></li>
  <li><a href="/" target="_blank">JS特效</a></li>
  <li><a href="/" target="_blank">CSS布局</a></li>
  <li><a href="/js_tab/" target="_blank">TAB选项卡</a></li>
  <li><a href="/js_pic/" target="_blank">幻灯片</a></li>
 </ul>
  <ul class="content">
  <li>内容1</li>
  <li style=" display:none;">内容内容2</li>
  <li style=" display:none;">内容内容内容3</li>
  <li style=" display:none;">内容内容内容内容4</li>
  <li style=" display:none;">内容内容内容内容内容5</li>
 </ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
在for循环中length值是否需要缓存
Jul 27 #Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 #Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 #Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
You might like
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
Symfony控制层深入详解
2016/03/17 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
如何在python中使用selenium的示例
2017/12/26 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
小学生作文评语
2014/04/18 职场文书
班主任个人工作反思
2014/04/28 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python