在Web页上模拟(QQ)魔法表情

web

在WEB页面中利用层(DIV)和嵌入FLASH时对相关的属性进行设置,可以模拟出魔法表情的效果.(即播放透明背景的SWF,具体可以看看QQ较新版本中的"魔法表情"功能).由于是在WEB页中模拟实现,所以,当然是你关闭浏览器或者说最小化浏览器,模拟实现的魔法表情也就随着WEB页面一起"没有了".

我用JS写了个简单的例子,演示页面(DEMO)入下:

http://exp.univchina.org/univs/sjtu/Tomato/simulateMagicFace/Tomato.html

实现方法简单说来主要注意两个地方就可以了:一是在嵌入FLASH的代码中,需要设置参数让FLASH的背景透明, <param name="wmode" value="transparent">,第二就是要把FLASH放到一个专门的层中,然后控制层显示在适当的位置就可以了.当然,你可以有两种选择,一个就是动态写入嵌入FLASH的代码,另一个就是动态控制层的显示属性,即层是否可见.

在DEMO中用到的JS代码如下:

1.用于初始化并排列待选表情的方法Ini;

function Ini()
{
 var left;
 var top;
 var screenWidth = screen.availWidth;
 var screenHeight = screen.availHeight;
 left = (screenWidth-500)/2;
 top = (screenHeight-500)/2;
 var imgPath;
 document.write("<img src=\"magicface\\images\\mf_000.gif\" />

点击图标查看对应的魔法表情 <br />");
 for(i=1;i<=320;i++)
 {
  if(i<100)
  {
   if(i<10)
   {
    imgPath = "magicface\\images\\mf_00"+i+".gif";
   }
   else
   {
    imgPath = "magicface\\images\\mf_0"+i+".gif";
   }
  }
  else
  {
   imgPath = "magicface\\images\\mf_"+i+".gif";
  }
  document.write("<a href=\"javascript:showMagicFace("+i+" , "+left+" , "+top+" , 500 , 350);\"><img src=\""+imgPath+"\" border=\"0\" /></a>  ");
 }
}

2.用于显示魔法表情的方法showMagicFace;

function showMagicFace(ID , _left , _top , _width , _height)
{
 Ini();
 var _path;
 if(ID<100)
 {
  if(ID<10)
  {
   _path = "magicface\\flash\\mf_00"+ID+".swf";
  }
  else
  {
   _path = "magicface\\flash\\mf_0"+ID+".swf";
  }
 }
 else
 {
  _path = "magicface\\flash\\mf_"+ID+".swf";
 }
 document.write("<DIV style=\"Z-INDEX: 99; POSITION: absolute; left:" + _left + "px;top:" + _top + "px\"><object codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab

#version=6,0,29,0\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"" + _width + "\" height=\"" + _height + "\"><param name=\"movie\" value=\"" + _path + "\"><param name=\"menu\" value=\"false\"><param name=\"quality\" value=\"high\"><param name=\"play\" value=\"false\"><param name=\"wmode\" value=\"transparent\"><embed src=\"" + _path + "\" wmode=\"transparent\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\""+_width+"\" height=\"" + _height + "\"></embed></object></DIV>");
 var over = setTimeout("location.href='Tomato.html'",5000);
}

然后只需要在页面载入时执行Ini()初始化就可以了.

因为在DEMO不涉及后台程序,有兴趣的朋友直接把查看HTML页面源代码就可以.欢迎转载和使用,请保留版权信息

时间: 2024-10-07 13:58:13

在Web页上模拟(QQ)魔法表情的相关文章

web页上在android手机app里点不动上传图片按钮

问题描述 web页上在android手机app里点不动上传图片按钮 web页上在android手机app里点不动上传图片按钮 web页上在android手机app里点不动上传图片按钮 解决方案 看看事件有没有执行,服务器有没有响应? 解决方案二: 看版本,如果是5.0前,用file方式的话,除非自己重写WebChromeClient,拦截后改后原生执行如果是5.0开始,看官方说法是支持file方式的文件选择上传 解决方案三: 如果是webview的话,看看也没中是否加了点击事件,然后看看你是否拦

如何在Web页上实现文件上传

web|上传 public class UploadServlet extends HttpServlet<br> {<br>   //default maximum allowable file size is 100k<br>   static final int MAX_SIZE = 102400;<br>   //instance variables to store root and success message<br>   Stri

模拟qq的复制聊天记录到发消息框

接上-----"模拟qq的消息接收"    qq 的消息发送界面提供了聊天记录,并且你可以通过鼠标轻松地.重复地把聊天记录复制到发消息框里,下面就是我提供的web页里实现的方法(注:此页面的来源为天乐的picq,小白只是添加了一个函数和自己的asp代码,实现了复制的功能!)下面是显示聊天记录页的主要代码:    <table border="0" width="100%" cellspacing="0" cellpadd

Flash打造QQ魔法表情“祈祷”超详细图解

在新版QQ的聊天窗口中点击"选择表情"图标,你会看到表情列表里多了个"魔法表情"标签页.这是全新推出的QQ魔法表情,其不同于以往的QQ表情,QQ魔法表情更加生动.形象,它可以跳出聊天窗口显示,而且表情也更加的丰富.文章末尾提供源文件.效果及素材供大家下载参考. 现在我们来试着自己制作一个flash的QQ表情--"祈祷". 为满足初学者的要求,我们采取详细图解的方式为大家仔细讲述每一步的绘制过程.  绘制步骤提纲 一.动画分析 首先要制定人物动画剧

如何在Web页面上直接打开、编辑、创建Office文档

web|创建|页面 有朋友询问如何在Web页面上做到像SharePoint中的效果一样,能直接激活客户端的Word来打开.doc文件,而不是类似直接点击.doc文档链接时Word在IE中被打开那样.想想这个问题应该很多人都会感兴趣,所以干脆写一篇blog来大致描述一下方法. 在安装Office2003以后,有一个ActiveX控件被安装到了系统中,这个控件位于"Program Files\Microsoft Office\OFFICE11\owssupp.dll".通过这个控件,客户端

模拟qq的消息接收

     接上:--->"模拟QQ的下拉列表选择图象(小白完善版)"     我们知道,在使用qq时,当你的朋友给你发来消息时,他的头像会不停的闪动,直到你查看该条消息,他才安静下来.这次小白要做的就是模拟这个东东:     1.来消息-->头像闪动               首先我们取出用户列表---如果该用户没发新消息给你,则显示他注册时的头像,否则,显示的图片为我们特制的动画图片(也可以对他的图片进行js特效处理:过一定的时间显示,给人闪动的感觉),这里给出第一种方

用ASP技术实现在WEB网页上浏览目录及文件

web|网页 用ASP技术实现在WEB网页上浏览目录及文件 周仰平 摘要  目前在许多单位里,象WORD.EXCEL或WPS该类文档文件已成为重要的数据信息资源,在INTRANET WEB平台上如何高效率地管理这些信息资源是一个需要解决的问题.本文是利用ASP技术开发一个基于WEB的应用程序,实现在WEB页面上浏览目录文件,很轻易地做到诸如WORD.EXCEL和WPS等文档文件的查阅和下载,大大地减少信息维护的工作量. 关键词  ASP  WEB  文档文件   前言:在INTRANET平台上,

从 ASP Web 页返回 XML

概要从 Active Server Pages (ASP) Web 页返回 XML 数据是一种常见的编程要求. 实现此要求所用的方法因用来托管 ASP 应用程序的 Microsoft Internet 信息服务 (IIS) 的版本而异. 本文中的分步指南带有相关的示例代码,演示了怎样从 ASP 页返回可扩展标记语言 (XML) 数据.  下面的示例代码创建一个 ASP 页,此页返回XML 格式的 ActiveX Data Objects (ADO) 记录集的内容. 此代码连接着 SQL Serv

解决WEB页面上焦点控制一法

web|解决|控制|页面 解决WEB页面上"焦点控制"一法 对于B/S的系统,在页面控制上不如C/S系统那么控制灵活,就如输入的焦点问题,客户都很想通过键盘对数据进行录入,这样的要求我想100个客户中会有90个吧. 因此解决焦点获取问题是必要的.大家可以从网上找到一些方法,不过都比较麻烦,我现在介绍一种很方便的.效果也很不错的方法给大家. 我前段时间看了MS的ASP.NET讲座,在里面谈到了如何让"回车键"使文本框的焦点一个个下移.其中提了三种方法,最好的一种是这样