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

“不能执行已释放的Script代码”错误的原因及解决办法

Sep 09 Javascript

jQuery筛选器children()案例详解(图文)

Feb 17 Javascript

javascript实现的DES加密示例

Oct 30 Javascript

JavaScript原生对象之String对象的属性和方法详解

Mar 13 Javascript

AngularJs实现分页功能不带省略号的代码

May 30 Javascript

bootstrap table操作技巧分享

Feb 15 Javascript

详解javascript中的babel到底是什么

Jun 21 Javascript

js replace替换字符串同时替换多个方法

Nov 27 Javascript

vue移动端城市三级联动组件使用详解

Jul 26 Javascript

Vue 实现显示/隐藏层的思路（加全局点击事件）

Dec 31 Javascript

微信小程序实现上传照片代码实例解析

Aug 04 Javascript

JavaScript Html实现移动端红包雨功能页面

Jan 10 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 七大优势分析

2009/06/23 PHP

php获取图片信息的方法详解

2015/12/10 PHP

Javascript倒计时页面跳转实例小结

2013/09/11 Javascript

在jquery中combobox多选的不兼容问题总结

2013/12/24 Javascript

javascript制作loading动画效果 loading效果

2014/01/14 Javascript

jQuery简单实现QQ空间点赞已经取消点赞

2015/04/02 Javascript

JQuery中attr方法和removeAttr方法用法实例

2015/05/18 Javascript

JS获取CSS样式（style/getComputedStyle/currentStyle）

2016/01/19 Javascript

jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】

2016/08/20 Javascript

从零开始学习Node.js系列教程三：图片上传和显示方法示例

2017/04/13 Javascript

jquery加载单文件vue组件的方法

2017/06/20 jQuery

微信小程序之前台循环数据绑定

2017/08/18 Javascript

分析JS中this引发的bug

2017/12/12 Javascript

Angular2使用vscode断点调试ts文件的方法

2017/12/13 Javascript

快速解决vue在ios端下点击响应延时的问题

2018/08/27 Javascript

vue.js表单验证插件(vee-validate)的使用教程详解

2019/05/23 Javascript

vue页面切换项目实现转场动画的方法

2019/11/12 Javascript

angular8.5集成TinyMce5的使用和详细配置(推荐)

2020/11/16 Javascript

[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16

2018/08/17 DOTA

Python数据分析之获取双色球历史信息的方法示例

2018/02/03 Python

Python2与Python3的区别实例总结

2019/04/17 Python

使用python切片实现二维数组复制示例

2019/11/26 Python

详解Anaconda安装tensorflow报错问题解决方法

2020/11/01 Python

Weblogic的布署方式

2013/08/23 面试题

煤矿班组长竞聘书

2014/03/31 职场文书

教师党员个人整改措施材料

2014/09/16 职场文书

教师师德师风自我剖析材料

2014/09/29 职场文书

小学生成绩单评语

2014/12/31 职场文书

嘉宾邀请函

2015/01/31 职场文书

2015年人事专员工作总结

2015/04/29 职场文书

2015年体育教师个人工作总结

2015/05/12 职场文书

2015年统计员个人工作总结

2015/07/23 职场文书

《语言的突破》读后感3篇

2019/12/12 职场文书

一定要知道的 25 个 Vue 技巧

2021/11/02 Vue.js

人民币符号

2022/02/17 杂记

解决Mysql中的innoDB幻读问题

2022/04/29 MySQL