编程 Javascript

js实现九宫格图片半透明渐显特效的方法

Posted in Javascript onFebruary 16, 2015

本文实例讲述了js实现九宫格图片半透明渐显特效的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<title>九宫格图片半透明渐显效果</title>

<body>

<STYLE type=text/css>.invisible {

 FILTER: alpha(opacity=0)

}

</STYLE>
<SCRIPT language=JavaScript1.2>

<!--

function high(which2){

theobject=which2

highlighting=setInterval("highlightit(theobject)",50)

}

function low(which2){

clearInterval(highlighting)

which2.filters.alpha.opacity=0

}

function highlightit(cur2){

if (cur2.filters.alpha.opacity<100)

cur2.filters.alpha.opacity+=10

else if (window.highlighting)

clearInterval(highlighting)

}

//-->

</SCRIPT>

      <TABLE borderColor=#999999 cellSpacing=8 cellPadding=0 width=302 

        border=0><TBODY>

        <TR>

          <TD width=90 background=text1.gif bgColor=#db4d0e 

            height=90><A href=""><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m01.jpg" border=0 width=180px height=135px></A></TD>

          <TD width=90 background=text2.gif bgColor=#ff9f07><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m02.jpg" border=0 width=180px height=135px></A></TD>

          <TD width=90 background=text3.gif bgColor=#ff9f07><A 

            href=""><IMG class=invisible 

            onmouseover=high(this) onmouseout=low(this) src="/images/m03.jpg" 

            border=0 width=180px height=135px></A></TD></TR>

        <TR>

          <TD background=text4.gif bgColor=#ff9f07><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m04.jpg" border=0 width=180px height=135px></A></TD>

          <TD background=text5.gif bgColor=#a5d523><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m05.jpg" border=0 width=180px height=135px></A></TD>

          <TD background=text6.gif bgColor=#c56e19><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m06.jpg" border=0 width=180px height=135px></A></TD></TR>

        <TR>

          <TD background=text12.gif bgColor=#ff9f07><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m07.jpg" border=0 width=180px height=135px></A></TD>

          <TD background=text8.gif bgColor=#c56e19><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) src="/images/m08.jpg" 

            border=0 width=180px height=135px></A></TD>

          <TD background=text7.gif bgColor=#c56e19><A 

            href="/"><IMG 

            class=invisible onmouseover=high(this) onmouseout=low(this) 

            src="/images/m09.jpg" border=0 width=180px height=135px></A></TD></TR></TBODY></TABLE>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

js实现九宫格图片半透明渐显特效的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js multiple全选与取消全选实现代码

Dec 04 Javascript

JS显示表格内指定行html代码的方法

Mar 31 Javascript

jQuery实现验证年龄简单思路

Feb 24 Javascript

JavaScript直播评论发弹幕切图功能点集合效果代码

Jun 26 Javascript

Vue.js每天必学之过滤器与自定义过滤器

Sep 07 Javascript

简单易懂的天气插件（代码分享）

Feb 04 Javascript

使用jQuery实现简单的tab框实例

Aug 22 jQuery

Vue.js与 ASP.NET Core 服务端渲染功能整合

Nov 16 Javascript

npm 更改默认全局路径以及国内镜像的方法

May 16 Javascript

Vue生命周期activated之返回上一页不重新请求数据操作

Jul 26 Javascript

Vue路由权限控制解析

Nov 09 Javascript

手写Vue源码之数据劫持示例详解

Jan 04 Vue.js

JS+CSS实现Li列表隔行换色效果的方法

Feb 16 #Javascript

JavaScript实现文字与图片拖拽效果的方法

Feb 16 #Javascript

jQuery实现点击图片翻页展示效果的方法

Feb 16 #Javascript

JS+CSS实现可拖动的弹出提示框

Feb 16 #Javascript

js实现下拉框选择要显示图片的方法

Feb 16 #Javascript

js实现点击图片将图片地址复制到粘贴板的方法

Feb 16 #Javascript

js实现鼠标经过时图片滚动停止的方法

Feb 16 #Javascript

You might like

广播爱好者需要了解的天线知识

2021/03/01 无线电

如何去掉文章里的 html 语法

2006/10/09 PHP

PHP多线程批量采集下载美女图片的实现代码(续)

2013/06/03 PHP

PHP中使用CURL模拟登录并获取数据实例

2014/07/01 PHP

Cookie 注入是怎样产生的

2009/04/08 Javascript

用jquery写的菜单从左往右滑动出现

2014/04/11 Javascript

不到30行JS代码实现Excel表格的方法

2014/11/15 Javascript

JS实现页面载入时随机显示图片效果

2016/09/07 Javascript

使用layui 渲染table数据表格的实例代码

2018/08/19 Javascript

Vue中的基础过渡动画及实现原理解析

2018/12/04 Javascript

react-native滑动吸顶效果的实现过程

2019/06/03 Javascript

Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

2019/10/28 Javascript

js闭包的9个使用场景

2020/12/29 Javascript

[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频

2014/04/04 DOTA

[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

Python操作MySQL数据库9个实用实例

2015/12/11 Python

举例讲解Python中的list列表数据结构用法

2016/03/12 Python

pandas string转dataframe的方法

2018/04/11 Python

对Python 文件夹遍历和文件查找的实例讲解

2018/04/26 Python

Pandas:DataFrame对象的基础操作方法

2018/06/07 Python

Python Socket编程之多线程聊天室

2018/07/28 Python

Python多线程原理与用法详解

2018/08/20 Python

Python 输出时去掉列表元组外面的方括号与圆括号的方法

2018/12/24 Python

浅谈Python 参数与变量

2020/06/20 Python

Python实现异步IO的示例

2020/11/05 Python

使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

2016/07/08 HTML / CSS

世界上最大的罕见唱片、CD和音乐纪念品网上商店：991.com

2018/05/03 全球购物

纽约和芝加哥当天送花：Ode à la Rose

2019/07/05 全球购物

建设投标担保书

2014/05/13 职场文书

计算机售后服务承诺书

2014/05/30 职场文书

2015年五一劳动节活动总结

2015/02/09 职场文书

离婚上诉状范文

2015/05/23 职场文书

运动会通讯稿50字

2015/07/20 职场文书

创业分两种人：那么哪些适合创业？,哪些适合不适合创业呢？

2019/08/23 职场文书

编写python程序的90条建议

2021/04/14 Python

Go语言实现一个简单的并发聊天室的项目实战

2022/03/18 Golang