编程 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 相关文章推荐

你必须知道的Javascript知识点之"深入理解作用域链"的介绍

Apr 23 Javascript

jQuery中has()方法用法实例

Jan 06 Javascript

javascript中Array数组的迭代方法实例分析

Feb 04 Javascript

Javascript中With语句用法实例

May 14 Javascript

C++中的string类的用法小结

Aug 07 Javascript

js仿3366小游戏选字游戏

Apr 14 Javascript

jQuery Easyui Tabs扩展根据自定义属性打开页签

Aug 15 Javascript

基于angularjs实现图片放大镜效果

Aug 31 Javascript

jquery实现点击页面回到顶部

Nov 23 Javascript

详解vue中使用protobuf踩坑记

May 07 Javascript

微信js-sdk 录音功能的示例代码

Nov 01 Javascript

小程序实现图片预览裁剪插件

Nov 22 Javascript

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

一步一步学习PHP(7) php 字符串相关应用

2010/03/05 PHP

用PHP获取Google AJAX Search API 数据的代码

2010/03/12 PHP

yii框架搜索分页modle写法

2016/12/19 PHP

PHP常用算法和数据结构示例(必看篇)

2017/03/15 PHP

PHP设计模式之模板模式定义与用法详解

2018/12/20 PHP

ThinkPHP5分页paginate代码实例解析

2020/11/10 PHP

快速保存网页中所有图片的方法

2006/06/23 Javascript

JS 添加网页桌面快捷方式的代码详细整理

2012/12/27 Javascript

纯javascript移动优先的幻灯片效果

2015/11/02 Javascript

JavaScript禁止用户多次提交的两种方法

2016/07/24 Javascript

Node.js的基本知识简单汇总

2016/09/19 Javascript

extjs简介_动力节点Java学院整理

2017/07/17 Javascript

通过fastclick源码分析彻底解决tap“点透”

2017/12/24 Javascript

vue-cli下的vuex的简单Demo图解(实现加1减1操作)

2018/02/26 Javascript

vue实现循环切换动画

2018/10/17 Javascript

bootstrap table列和表头对不齐的解决方法

2019/07/19 Javascript

详解vue中使用transition和animation的实例代码

2020/12/12 Vue.js

简单谈谈Python中的元祖（Tuple）和字典（Dict）

2017/04/21 Python

PyCharm安装第三方库如Requests的图文教程

2018/05/18 Python

简单了解Django应用app及分布式路由

2019/07/24 Python

python requests更换代理适用于IP频率限制的方法

2019/08/21 Python

Python vtk读取并显示dicom文件示例

2020/01/13 Python

如何使用selenium和requests组合实现登录页面

2020/02/03 Python

python boto和boto3操作bucket的示例

2020/10/30 Python

用python批量移动文件

2021/01/14 Python

LocalStorage记住用户和密码功能

2017/07/24 HTML / CSS

2019年Java面试必问之经典试题

2012/09/12 面试题

.NET面试题：什么是反射

2016/09/30 面试题

Linux Interview Questions For software testers

2012/06/02 面试题

哈理工毕业生的求职信

2013/12/22 职场文书

募捐倡议书怎么写

2014/05/14 职场文书

主题党日活动总结

2014/07/08 职场文书

银行求职信范文怎么写

2015/03/20 职场文书

Nginx解决前端访问资源跨域问题的方法详解

2021/03/31 Servers

详解MindSpore自定义模型损失函数

2021/06/30 Python

Python字符串的转义字符

2022/04/07 Python