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

使用jQuery实现dropdownlist的联动效果(sharepoint 2007)

Mar 30 Javascript

jQuery里filter()函数与find()函数用法分析

Jun 24 Javascript

javascript获取系统当前时间的方法

Nov 19 Javascript

Javascript的表单验证-提交表单

Mar 18 Javascript

js删除数组元素、清空数组的简单方法(必看)

Jul 27 Javascript

微信小程序 Windows2008 R2服务器配置TLS1.2方法

Dec 05 Javascript

详解Angular中的自定义服务Service、Provider以及Factory

Apr 22 Javascript

使用javaScript实现鼠标拖拽事件

Apr 03 Javascript

Vue组件创建和传值的方法

Aug 17 Javascript

解决layui的table插件无法多层级获取json数据的问题

Sep 19 Javascript

vue实现购物车选择功能

Jan 10 Javascript

京东优选小程序的实现代码示例

Feb 25 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

德生BCL3000的电路分析和打磨

2021/03/02 无线电

PHP提取字符串中的图片地址[正则表达式]

2011/11/12 PHP

Mysql中分页查询的两个解决方法比较

2013/05/02 PHP

深入PHP运行环境配置的详解

2013/06/04 PHP

PHP微信开发之二维码生成类

2015/06/26 PHP

php-app开发接口加密详解

2018/04/18 PHP

针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例

2018/06/16 PHP

js实现可拖动DIV的方法

2013/12/17 Javascript

js自动生成的元素与页面原有元素发生堆叠的解决方法

2014/09/04 Javascript

javascript实现简单的贪吃蛇游戏

2015/03/31 Javascript

KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

2016/10/10 Javascript

Bootstrap CSS组件之面包屑导航(breadcrumb)

2016/12/17 Javascript

javascript实现二叉树的代码

2017/06/08 Javascript

使用命令行工具npm新创建一个vue项目的方法

2017/12/27 Javascript

jquery实现垂直无限轮播的方法分析

2019/07/16 jQuery

JS检索下拉列表框中被选项目的索引号(selectedIndex)

2019/12/17 Javascript

JavaScript中window和document用法详解

2020/07/28 Javascript

OpenLayers3加载常用控件使用方法详解

2020/09/25 Javascript

python实现Windows电脑定时关机

2018/06/20 Python

python随机数分布random测试

2018/08/27 Python

Python Numpy 实现交换两行和两列的方法

2019/06/26 Python

python小项目之五子棋游戏

2019/12/26 Python

python使用docx模块读写docx文件的方法与docx模块常用方法详解

2020/02/17 Python

Python爬取你好李焕英豆瓣短评生成词云的示例代码

2021/02/24 Python

HTML5是否真的可以取代Flash

2010/02/10 HTML / CSS

加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商：LE CHÂTEAU

2017/10/06 全球购物

小学教师学期末自我评价

2013/09/25 职场文书

2014年小学工作总结

2014/11/26 职场文书

确保工程质量承诺书

2015/04/29 职场文书

元旦主持词开场白

2015/05/29 职场文书

婚育证明样本

2015/06/16 职场文书

入党转正申请自我鉴定

2019/06/25 职场文书

Jupyter notebook 输出部分显示不全的解决方案

2021/04/24 Python

OpenCV实现反阈值二值化

2021/11/17 Java/Android

我去timi了，一起去timi是什么意思？

2022/04/13 杂记

在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理

2022/04/14 Python