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 相关文章推荐
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
在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
探讨如何把session存入数据库
2013/06/07 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle