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

2024-02-06 02:05:40

本文实例讲述了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程序设计有所帮助。

JQuery插件iScroll实现下拉刷新，滚动翻页特效

JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <
jQuery实现table隔行换色和鼠标经过变色的两种方法

一.隔行换色复制代码代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码代码如下: $("table tr:nth-child(odd)").css("background-col
解决Jquery鼠标经过不停滑动的问题

很多情况 Jquery 中尤其在鼠标经过的时候会不停的显示隐藏 html元素. 导致来回隐藏.显示复制代码代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ //********问题点在这里,这里没有判断是否处于动画 $(".panel").slideToggle("slow
jQuery实现鼠标经过弹出提示信息的地图热点效果

本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果.分享给大家供大家参考.具体如下: 这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&
jquery实现通用版鼠标经过淡入淡出效果

复制代码代码如下: <a class="jq_btn" href="#"><div></div></a> //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(
jQuery实现鼠标经过图片预览大图效果

jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘
jQuery实现鼠标经过像翻页和描点链接效果

在百度地图api首页经常见到当鼠标经过像翻页和描点链接效果,基于jquery和js代码是如何实现的呢?下面小编给大家分享关键代码,一起看下吧! var timer; $("li").on("mouseover",function(){ clearTimeout(timer); timer=null; $(this).addClass("active"); $(this).siblings().removeClass("active&qu
jQuery实现鼠标经过时出现隐藏层文字链接的方法

本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
jQuery 鼠标经过(hover)事件的延时处理示例

一.关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干
jquery实现TAB选项卡鼠标经过带延迟效果的方法

本文实例讲述了jquery实现TAB选项卡鼠标经过带延迟效果的方法.分享给大家供大家参考.具体如下: 如果你想实现鼠标停留在DIV上面N秒后才执行某些函数,或者类似下面的TAB切换时不经过之间的显示,用下面的方法可以实现. <!doctype html> <html> <head> <meta charset="utf-8"> <title>hoverTAB有延迟显示的效果</title> <style ty
jquery编写Tab选项卡滚动导航切换特效

本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=
jQuery实现带延迟效果的滑动菜单代码

本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
jQuery实现TAB选项卡切换特效简单演示

本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱.如下面图片所示: 刚开始打开时页面布局正确: 此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图: 但是首页选项卡的页面是正常的. 为了便于解释说明,这里用第一个选项卡代表 "首页",第二个选项卡代表"子菜单10" 出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷
jQuery实现Tab选项卡切换效果简单演示

本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-
jQuery EasyUI Tab 选项卡问题小结

需要解决的问题: 比如说我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）

本文实例为大家分享了jquery实现tab选项卡切换展示的具体代码,供大家参考,具体内容如下同时实现悬停.下方横线动画位移: 代码: <sytle> *{margin:0;padding:0; } .box{position:relative;font-size:0;} .box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-s
jQuery实现tab选项卡效果的方法

本文实例讲述了jQuery实现tab选项卡效果的方法.分享给大家供大家参考.具体如下: var tabs = { init: function(){ var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav'); $tab_contents.find('.tab-content:not(:first)').hide(); $tab_nav.find('li:first').addClass('active'); $tab_nav.on(
js实现鼠标触发图片抖动效果的方法

本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> //configure shake degr

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

相关推荐

随机推荐