编程 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实现倒计时按钮的实现代码

Mar 23 Javascript

JavaScript地图拖动功能SpryMap的简单实现

Jul 17 Javascript

javascript实现yield的方法

Nov 06 Javascript

js实现正方形颜色从下往上升的效果

Aug 04 Javascript

jQuery中unbind()方法用法实例

Jan 19 Javascript

谈谈JavaScript自定义回调函数

Oct 18 Javascript

js点击文本框后才加载验证码实例代码

Oct 20 Javascript

检查表单元素的值是否为空的实例代码

Jun 16 Javascript

JS实现简单短信验证码界面

Aug 07 Javascript

浅谈webpack devtool里的7种SourceMap模式

Jan 14 Javascript

Vue使用v-viewer实现图片预览

Oct 21 Javascript

基于jQuery拖拽事件的封装

Nov 29 jQuery

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

ThinkPHP分页类使用详解

2014/03/05 PHP

十大使用PHP框架的理由

2015/09/26 PHP

通过百度地图获取公交线路的站点坐标的js代码

2012/05/11 Javascript

Js为表单动态添加节点内容的方法

2015/02/10 Javascript

javascript封装addLoadEvent实现页面同时加载执行多个函数的方法

2016/07/25 Javascript

获取JS中网页各种高宽与位置的方法总结

2016/07/27 Javascript

jQuery实现表格文本框淡入更改值后淡出效果

2016/09/27 Javascript

jquery.flot.js简单绘制折线图用法示例

2017/03/13 Javascript

jQuery用noConflict代替$的实现方法

2017/04/12 jQuery

NodeJs模拟登陆正方教务

2017/04/28 NodeJs

JSON 数据格式详解

2017/09/13 Javascript

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

2017/12/27 Javascript

搞笑的程序猿：看看你是哪种Python程序员

2015/06/12 Python

深入浅析Python字符编码

2015/11/12 Python

使用rst2pdf实现将sphinx生成PDF

2016/06/07 Python

Python堆排序原理与实现方法详解

2018/05/11 Python

python字符串常用方法

2018/06/14 Python

python多进程使用及线程池的使用方法代码详解

2018/10/24 Python

鲜为人知的HTML5语音合成功能

2019/05/17 HTML / CSS

使用iframe+postMessage实现页面跨域通信的示例代码

2020/01/14 HTML / CSS

美国一家主营日韩美妆护肤品的在线商店：iMomoko

2016/09/11 全球购物

介绍一下Ruby的特点

2013/01/20 面试题

写好自荐信的技巧

2013/11/08 职场文书

仓库班组长岗位职责

2013/12/12 职场文书

三个儿子教学反思

2014/02/03 职场文书

优秀老师事迹材料

2014/02/05 职场文书

计算机大学生职业生涯规划书范文

2014/02/19 职场文书

优秀本科毕业生自荐信

2014/07/04 职场文书

党员干部观看《周恩来四个昼夜》思想汇报

2014/09/10 职场文书

个人合伙协议书范本

2014/10/14 职场文书

小学见习报告

2015/06/23 职场文书

2015秋季运动会通讯稿

2015/07/18 职场文书

为什么不建议在go项目中使用init()

2021/04/12 Golang

python代码实现备忘录案例讲解

2021/07/26 Python

Vue2.0搭建脚手架

2022/03/13 Vue.js

漫画「狩龙人拉格纳」公开TV动画预告图

2022/03/22 日漫