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 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
react-router实现按需加载
May 09 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
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
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
园林设计专业毕业生求职信
2014/03/23 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
开业典礼致辞
2015/07/29 职场文书