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 相关文章推荐
js验证模型自我实现的具体方法
Jun 21 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP入门速成(2)
2006/10/09 PHP
多数据表共用一个页的新闻发布
2006/10/09 PHP
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python实现调度算法代码详解
2017/12/01 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
一个SQL面试题
2014/08/21 面试题
公司领导推荐信
2013/11/12 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
行政助理的岗位职责
2014/02/18 职场文书
百年校庆节目主持词
2014/03/27 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
学校百日安全活动总结
2015/05/07 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
小学三年级作文之写景
2019/11/05 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL