JQuery实现当鼠标停留在某区域3秒后自动执行


Posted in Javascript onSeptember 09, 2014

这篇文章主要介绍了JQuery实现当鼠标停留在某区域3秒后自动执行,可以应用于很多场景

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<style type="text/css">
.main{width:500px;height:400px;border:dashed 1px #ccc;margin:0 auto;line-height:400px;text-align:center;}
</style>
<body>
<script type="text/javascript">
$(function(){
$(".main").mouseover(function(){
setTimeout(function(){
alert('当你的鼠标移动到框体时,我会延迟3秒才显示哦!');
},3000)
});
})
</script>
<div class="main">把鼠标移入此框体中,等待3秒。</div> 
 </body>
</html>
Javascript 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 #Javascript
使用typeof方法判断undefined类型
Sep 09 #Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 #Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 #Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 #Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 #Javascript
三种取消选中单选框radio的方法
Sep 09 #Javascript
You might like
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php生成无限栏目树
2017/03/16 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
浅析Cookie中的Path与domain
2013/12/18 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python之消除前缀重命名的方法
2018/10/21 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python hash每次调用结果不同的原因
2019/11/21 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
如何保障Web服务器安全
2014/05/05 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
中学教师教学工作总结
2015/08/13 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
你真的会用Mysql的explain吗
2022/03/31 MySQL