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打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
微信小程序 动画的简单实例
Oct 12 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
Node.js学习教程之Module模块
Sep 03 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
文件上传类
2006/10/09 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Yii中表单用法实例详解
2016/01/05 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Python中的is和id用法分析
2015/01/26 Python
python字典DICT类型合并详解
2017/08/17 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
党的群众教育实践活动实施方案
2014/06/12 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
个人委托书范文
2015/01/28 职场文书
应届生简历自我评价
2015/03/11 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
V Rising 服务器搭建图文教程
2022/06/16 Servers
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python