javascript简单实现类似QQ头像弹出效果的方法


Posted in Javascript onAugust 03, 2015

本文实例讲述了javascript简单实现类似QQ头像弹出效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的类似QQ头像的弹出效果</title>
<style type="text/css">
#oimg{float:left; margin:10px}
#msg{border:solid; width:300px;height:250px;display:none;float:left;padding:10px}
</style>
</head>
<body>
<img id="oimg" src="images/show.jpg" />
<div id="msg">啦啦啦啦。。。。。</div>
<script type="text/javascript">
var oid=document.getElementById('oimg');
var omsg=document.getElementById('msg');
var timer=null;
oid.onmousemove=showMsg;
oid.onmouseout=hideMsg;
omsg.onmouseout=hideMsg;
omsg.onmousemove=function(){clearTimeout(timer)};
function showMsg(){if(timer){clearTimeout(timer)}omsg.style.display='block';}
function hideMsg(){timer=setTimeout(function(){omsg.style.display='none';},500);}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
javascript冒泡排序小结
Apr 10 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 #Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 #Javascript
JavaScript图片轮播代码分享
Jul 31 #Javascript
简单实现异步编程promise模式
Jul 31 #Javascript
JavaScript数据类型判定的总结笔记
Jul 31 #Javascript
jquery代码实现多选、不同分享功能
Jul 31 #Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
php预定义常量
2006/12/25 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
asp批量修改记录的代码
2008/06/25 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
python traceback捕获并打印异常的方法
2018/08/31 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python简单区块链模拟详解
2019/07/03 Python
python内存动态分配过程详解
2019/07/15 Python
django的ORM操作 增加和查询
2019/07/26 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
高中生物教学反思
2014/02/05 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
汽车转让协议书范本
2014/12/07 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
市场营销计划书
2019/04/24 职场文书