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

在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页面源代码就可以.欢迎转载和使用,请保留版权信息

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有