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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
原生JS轮播图插件
Feb 09 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
jQuery实现计算器功能
Oct 19 jQuery
在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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Fabric 应用案例
2016/08/28 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python 实现UTC时间加减的方法
2018/12/31 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
简单了解python单例模式的几种写法
2019/07/01 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
深圳-东方伟业笔试部分
2015/02/11 面试题
优纳科技软件测试面试题
2012/05/15 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
医学生求职自荐信
2013/10/25 职场文书
党员的自我评价范文
2014/01/02 职场文书
村官工作鉴定评语
2014/01/27 职场文书
2014年文员工作总结
2014/11/18 职场文书
如何写辞职书
2015/02/26 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
不要在HTML中滥用div
2021/05/08 HTML / CSS