js hover 定时器(实例代码)
$("#showComp tr:not('.stlisttitle')").hover(function(){
try{if($("#calendarPanel").is(":visible")) $(".playerlist").hide();else{clearTimeout(timMess);
$(".playerlist").css("top",$(this).offset().top-$(".calendarCon").offset().top-30).show();}}catch(e){}
},function(){
timMess=setTimeout(function(){
$(".playerlist").hide();
},300);
//$(this).css("background","");
});
$(".playerlist").hover(function(){
clearTimeout(timMess);
},function(){
timMess=setTimeout(function(){
$(".playerlist").hide();
},300);
});
效果如图:
相关推荐
-
JS操作CSS随机改变网页背景实现思路
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "http://www.baidu.com/img/baidu_sylogo1.gif", "http://www
-
jQuery控制图片的hover效果(smartRollover.js)
用js实现的好处是:如果一个网站中图片的hover效果比较多,可能每一个都要有css控制,那样代码有的冗余.但是有了js控制,不管有多少图片,hover效果都可以用同样的js,但是必须保证图片的out/off效果和over/on效果命名有规律性,比如: navi01_out.jpg/navi01_off.jpg navi01_over.jpg/nvai02_on.jpg 这样js控制起来非常方便.找到匹配的名称,hover时替换成另一个名称. 今天我想用jQuery控制一下效果: 代码如下: 复
-
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht
-
使用js操作css实现js改变背景图片示例
1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/
-
js模仿hover的具体实现代码
复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="description" content="this" /> <meta name="keywords" content="this" /> <title>this</
-
javascript解决IE6下hover问题的方法
有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下 <!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
-
JS组件Bootstrap dropdown组件扩展hover事件
bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码
-
js操作css属性实现div层展开关闭效果的方法
本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma
-
JS实现css hover操作的方法示例
本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:
-
详解Javascript动态操作CSS
一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamil
-
JavaScript实现为input与textarea自定义hover,focus效果的方法
本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n
随机推荐
- About Perl(翻译Perl官网介绍)
- Erlang初学:Erlang的一些特点和个人理解总结
- Oracle给用户授权truncatetable的实现方案
- ASP.NET中Cookie状态的说明与用法
- js判断样式className同时增加class或删除class
- PHP获取类中常量,属性,及方法列表的方法
- laravel安装和配置教程
- php中将数组转成字符串并保存到数据库中的函数代码
- 获取站点的各类响应时间(dns解析时间,响应时间,传输时间)
- Android中用Bmob实现短信验证码功能的方法详解
- 世界上最健康的作息时间表分享
- jquery中attr和prop的区别分析
- 一个不错的动感导航菜单
- Android实现多点触控,自由缩放图片的实例代码
- Android ViewPager的事件冲突的解决办法
- C#圆角窗体简单实现方法
- 双击滚屏-常用推荐
- 详解Spring Boot Oauth2缓存UserDetails到Ehcache
- python 常见字符串与函数的用法详解
- python画图--输出指定像素点的颜色值方法