编程 Javascript

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程序设计有所帮助。

- Author -

106444269

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery jsonp 使用示例代码

Aug 12 Javascript

用JavaScript仿PS里的羽化效果代码

Dec 20 Javascript

JavaScript程序员应该知道的45个实用技巧

Mar 04 Javascript

鼠标悬浮停留三秒后自动显示大图js代码

Sep 09 Javascript

使用jquery提交form表单并自定义action的实现代码

May 25 Javascript

什么是JavaScript中的结果值?

Oct 08 Javascript

Bootstrap滚动监听组件scrollspy.js使用方法详解

Jul 20 Javascript

javascript对HTML字符转义与反转义

Dec 13 Javascript

详解小程序input框失焦事件在提交事件前的处理

May 05 Javascript

JS去除字符串最后的逗号实例分析【四种方法】

Jun 20 Javascript

JavaScript实现随机五位数验证码

Sep 27 Javascript

vue父子组件间引用之$parent、$children

May 20 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