Simulate (QQ) magic expression on a Web page

Web

The use of layers (DIV) and embedded flash in the Web page to set the related properties can simulate the effect of magic expression. (That is, a SWF that plays a transparent background, you can look at the new version of QQ "Magic expression" function. Because it's a mock implementation on a Web page, of course, you close the browser or minimize the browser, and the magic expression of the mock implementation is "Gone" with the Web page.

I wrote a simple example of JS, Demo page (demo) into the following:

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

Implementation method Simple to say the main note two places on it: First, in the code embedded in Flash, you need to set parameters to make flash background transparent, <param name= "wmode" value= "Transparent"; The second is to put the flash into a dedicated layer, and then the control layer in the appropriate location can be. Of course, you can have two choices, one is to write dynamically embedded flash code, the other is the dynamic control layer display properties, that is, whether the layer is visible.

The JS code used in the demo is as follows:

1. Method ini for initializing and arranging the expression to be selected;

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 ("

Click on the icon to see the corresponding magic expression <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+", +); \ ></a>");
}
}

2. The method used to display magic expression showmagicface;

Function Showmagicface (IDs, _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";
&NBSP;&NBSP}
 }
 else
 {
  _path = "Magicface\\flash\\mf_" +id+ ". swf";
&NBSP}
 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\" ><p Aram 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);
}

Then you only need to perform the INI () initialization when the page is loaded.

Because in the demo does not involve background program, interested friends directly to view the HTML page source code can be. Welcome to reprint and use, please retain the copyright information