linux社区爱心援助Linux认证系列教程业界动态站务新闻公司招聘网络学院网址大全LPI专题CISCO专题
设为首页
加入收藏
管理团队
JSP  
JAVA  
PERL  
 您的位置:首页 > 开发语言 > JavaScript >
栏目导栏
  php
  JSP
  ASP
  asp.net
  JAVA
  c/c++/c#
  perl
  JavaScript
  Basic
  Delphi
资料搜索
热门文章
·javascript 时间对象的格式化
·去掉字符串前后的空格
·javascript 事件监听机制
·javascript 事件调用顺序
·js刷新框架子页面的七种方法
·JavaScript:替换字符串
·IE下的JScript编程需注意的内存
·用javascript操作word文档
·Javascript中CTRL+回车提交表单
·JS 获取鼠标位置
·javascript判断Email地址是否有
·Javascript中Select的OnChange
·JS实现的滑动展开与折叠效果
·有分页功能的WEB打印
·Javascript实现窗口最大化的严
最新文章
·使用CSS改变表格边框样式
·为网页添加浮动广告
·判断表单中添加是否数字的JS与
·让浏览器状态栏动起来
·使用Javascript制作行间颜色间
·禁止用右键查看源代码
·网页侦测四法
·制作弹出公告窗口
·为网页添加特效
·网页中取消鼠标右键方法大全
·JavaScript 根据屏幕解析度显示
·如何实现浏览器上的右键菜单
·如何制作浮动广告
·让弹出窗口变得“体贴”一些
·JavaScript技巧:让网页自动穿上
Google
 
在Web页上模拟(QQ)魔法表情
[ 作者:  加入时间:2007-12-12 16:43:55  来自:Linux联盟收集整理 ]
在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()nXBLinux联盟
{nXBLinux联盟
 var left;nXBLinux联盟
 var top;nXBLinux联盟
 var screenWidth = screen.availWidth;nXBLinux联盟
 var screenHeight = screen.availHeight;nXBLinux联盟
 left = (screenWidth-500)/2;nXBLinux联盟
 top = (screenHeight-500)/2;nXBLinux联盟
 var imgPath;nXBLinux联盟
 document.write("<img src=\"magicface\\images\\mf_000.gif\" />

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

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

function showMagicFace(ID , _left , _top , _width , _height)nXBLinux联盟
{nXBLinux联盟
 Ini();nXBLinux联盟
 var _path;nXBLinux联盟
 if(ID<100)nXBLinux联盟
 {nXBLinux联盟
  if(ID<10)nXBLinux联盟
  {nXBLinux联盟
   _path = "magicface\\flash\\mf_00"+ID+".swf";nXBLinux联盟
  }nXBLinux联盟
  elsenXBLinux联盟
  {nXBLinux联盟
   _path = "magicface\\flash\\mf_0"+ID+".swf";nXBLinux联盟
  }nXBLinux联盟
 }nXBLinux联盟
 elsenXBLinux联盟
 {nXBLinux联盟
  _path = "magicface\\flash\\mf_"+ID+".swf";nXBLinux联盟
 }nXBLinux联盟
 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>");nXBLinux联盟
 var over = setTimeout("location.href='Tomato.html'",5000);nXBLinux联盟
}

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

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

Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
评论】【加入收藏夹】【 】【打印】【关闭
※ 相关链接
 ·实现Web页面上的右键快捷菜单  (2007-11-30 13:11:04)
 ·巧妙实现隐藏不想打印的web页面元素  (2007-11-30 13:01:57)
 ·黄金比例与Web页面设计  (2007-10-26 13:09:19)
 ·用Asp.Net抓取web页面  (2007-10-26 12:55:19)
 ·浅谈ASP中Web页面间的数据传递  (2007-10-17 14:28:24)
 ·Linux平台下如何把幻灯片转换为Web页  (2005-11-28 14:57:16)