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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • C++获取本机登陆过的QQ号码示例程序

    C++获取本机登陆过的QQ号码示例程序

    先看效果图,代码在下面 复制代码 代码如下: // FileName: GetQQ.h #pragma once #include <vector> class GetQQ{private:    std::vector<CString> m_qqNum; public:    GetQQ();    ~GetQQ();public: // 获取QQ号码    std::vector<CString> Init(void);}; 复制代码 代码如下: // FileNa

  • 来自qq的javascript面试题

    复制代码 代码如下: var info="腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站."; info +="拍拍网于2005年9月12日上线发布,"; info +="2006年3月13日宣布正式运营,"; info +="是目前国内第二大电子商务平台."; info=info.split(","); for(var i=0; i<info.length; i++) { al

  • C++简单QQ程序服务器端的实现代码

    本文实例为大家分享了C++简单QQ程序服务器端的实现代码,供大家参考,具体内容如下 // ServerDlg.cpp : implementation file // #include "StdAfx.h" #include "Server.h" #include "ServerDlg.h" #ifdef _DEBUG #define new DEBUG_NEW #undef THIS_FILE static char THIS_FILE[] =

  • C#实现属于自己的QQ截图工具

    C#实现属于自己的QQ截图工具

    下面就具体介绍下实现截图工具的实现思路. 为了让大家更清楚地知道如何去实现自己的截图工具,首先我来描述下截图的一个过程--我们使用QQ的截图工具和Windows 自带的截图工具都可以发现,当我们点击QQ窗体中的截图按钮时,此时我们将看到一个全屏图片,然后我们可以在其上截图,当鼠标左键按下时,即代表开始截图,并我们可以移动鼠标来改变截图的大小,鼠标弹起时即代表结束截图,此时我们可以双击矩形区域完全截图,并且可以通过粘贴操作把截取的图片粘贴到聊天窗口的发送区,鼠标右键点击则是退出截图.这样我们截图的

  • javascript 仿QQ滑动菜单效果代码

    [程序源码] 复制代码 代码如下: var QQ = function() { // 公用函数 function T$(id) { return document.getElementById(id); } function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } function $extend(des, src) { for(var p in src) { des[p] = src[p];

  • JavaScript中的正则表达式使用及验证qq号码的正则

    废话不多说了,直接给大家贴正则表达式代码了. function myValid() { var errorMsg = ""; var res = true; //拿到要验证的值. var receiveName = $("#receiveName").val();//姓名 var receiveMobile = $("#tMobile").val();//手机号 var validCode = $("#validCode").

  • C#编程实现QQ界面的方法

    本文实例讲述了C#编程实现QQ界面的方法.分享给大家供大家参考,具体如下: 步骤: 1.新建一个页面,假如说叫VerticalMenu 2.把html代码copy到html代码区 3.把LoadTopMenu方法copy到cs代码区 4.运行即可 1.html代码 <STYLE type="text/css"> A:link {}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none} A:visited {}{ C

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

    本文实例讲述了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&q

  • javascript实现类似于新浪微博搜索框弹出效果的方法

    javascript实现类似于新浪微博搜索框弹出效果的方法

    本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法.分享给大家供大家参考.具体实现方法如下: <!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

  • Javascript公共脚本库系列(一): 弹出层脚本

    Javascript公共脚本库系列(一): 弹出层脚本

    一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图:  点击图中的"航空公司"后,会在"航空公司"下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS框架又有些杀鸡用牛刀.所以

  • javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. 2.console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. 3.onsole里面的内容非常丰富,你可以在控制台输入:console,然后就可看到: Console {memory: Memo

  • jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • JS实现的仿QQ空间图片弹出效果代码

    本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll

  • jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • JavaScript动态修改弹出窗口大小的方法

    本文实例讲述了JavaScript动态修改弹出窗口大小的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open弹出一个新的窗口,然后动态修改窗口大小 <!DOCTYPE html> <html> <head> <script> var w; function openwindow() { w=window.open('','', 'width=100,height=100'); w.focus(); } function

  • javascript自定义右键弹出菜单实现方法

    本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum

  • JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)

    JS实现延迟隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延迟隐藏</title> <style> #div1{ width:100px; height:100px; background:yellow; border: 5px solid #999; border-radius: 1

随机推荐