半透明图片效果的实现_网页特效_技术部落--打造最全面的IT技术网站_Jsbulo.com

首页 | IT新闻 | 硬件 | 操作系统 | 开发 | 网络编程 | 数据库 | 热门框架 | 网络安全 | 组网 | 建站指南 | 网页制作 | 特效 | 实用技巧 | 服务器 | 办公 | QQ | 探索 | 社区

部落首页 > 网页特效 > 正文

半透明图片效果的实现

2007-5-21 来源：技术部落编辑：Jsbulo 热度：

　　方法一：

第一步，请将下列原代码放入html文件的<head>和</head>之间
<script language="JavaScript1.2">
function makevisible(cur,which){
if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=20
}
</script>
================================
最后，在<img>标签内做如下的设置：
<img src="../../img/123-1.gif" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">

　　方法二：

<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">

　　方法二是将方法一种的JS代码融合到了图片代码中，其中方法二能同时实现IE和Mozilla的兼容性。

　　在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。针对IE的设定：this.filters.alpha.opacity=50　而针对Mozilla的设定：this.style.MozOpacity=0.5.　大家可以直接用这行代码给图片定义，只须修改图片地址就能实现上图效果。

技术部落，更多精彩内容尽在首页

【部落直达】【部落社区】【关闭】

相关链接

·滚动链接导航 (2007-2-25)
·图片代替按钮脚本 (2007-2-25)
·打开窗口等待 (2007-2-25)
·静态导航菜单 (2007-2-25)
·层叠式导航菜单 (2007-2-25)
·隐现导航脚本 (2007-2-25)

频道热门

热门新闻

精粹集锦

特别推荐

频道精选

·液晶显示器(LCD)重影问

·教你三种方法，让你的硬

·磁盘工具大集合

·SATA硬盘在安装系统时为

·学会三招恢复硬盘活力

·Vista驱动程序大全

·解决系统提示"你是软件

·高手必备 Linux常用命令

·史上最全面的WINDOWS系

·.WIM文件是什么？要用什

·java中字符串操作方法整

·获取cpu序列号,硬盘ID,

·中文搜索引擎核心技术揭

·ASP.NET用Jmail实现邮件

·从URL获取文件保存到本

·Javascript:keyCode键码

·在网站上加QQ联系方式的

·JavaScript常用判断函数

·JS-让你的回车转为(Shi

·javascript框架间函数传

·SQL Server数据导入导出

·常用SQL查询语句大集合

·ORACLE的索引和约束详解

·在FreeBSD下安装mysql5

·SQL Server2000数据库系

·新浪2008奥运主题邮箱注

·用其他邮箱登陆MSN的方

·ie二级链接打不开的解决

·更改Windows系统默认字

·忘记XP登入密码的9种解

·破解静态WEP KEY全过程

·“熊猫烧香”源码启示录

·黑客入侵网络的50种方法

·双击无法打开驱动器的杀

·十一种常见流氓软件完全

·91个排名：中国知名个人

·ECShop v2.5.0新版发布

·网店系统ECShop v2.5.0

·用Google AdSense日赚1

·DNS服务器出错的完全解