编程 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 图像动画的小demo

May 23 Javascript

举例详解Python中smtplib模块处理电子邮件的使用

Jun 24 Javascript

深入理解AngularJS中的ng-bind-html指令和$sce服务

Sep 08 Javascript

JavaScript九九乘法口诀表的简单实现

Oct 04 Javascript

.net MVC+Bootstrap下使用localResizeIMG上传图片

Apr 21 Javascript

jQuery选择器中的特殊符号处理方法

Sep 08 jQuery

vue实现点击关注后及时更新列表功能

Jun 26 Javascript

Vue开发实现吸顶效果的示例代码

Aug 21 Javascript

微信小程序用户拒绝授权的处理方法详解

Sep 20 Javascript

利用PHP实现递归删除链表元素的方法示例

Oct 23 Javascript

Nuxt的路由动画效果案例

Nov 06 Javascript

在vue中使用eslint,配合vscode的操作

Nov 09 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中filter函数校验数据的方法详解

2015/07/31 PHP

php自动提交表单的方法(基于fsockopen与curl)

2016/05/09 PHP

Thinkphp整合微信支付功能

2016/12/14 PHP

php实现获取农历(阴历)、节日、节气的类与用法示例

2017/11/20 PHP

js校验表单后提交表单的三种方法总结

2014/02/28 Javascript

innerHTML在IE中报错解决方案

2014/12/15 Javascript

Javascript中获取对象的原型对象的方法小结

2015/02/25 Javascript

JS往数组中添加项性能分析

2015/02/25 Javascript

浅谈JavaScript的事件

2015/02/27 Javascript

javascript基本数据类型及类型检测常用方法小结

2016/12/14 Javascript

node.js实现复制文本到剪切板的功能

2017/01/23 Javascript

nodejs集成sqlite使用示例

2017/06/05 NodeJs

vue checkbox 全选数据的绑定及获取和计算方法

2018/02/09 Javascript

vue 全选与反选的实现方法(无Bug 新手看过来)

2018/02/09 Javascript

如何为你的JavaScript代码日志着色详解

2019/04/08 Javascript

Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

2019/08/20 Javascript

[05:04]完美世界携手游戏风云打造卡尔工作室地图界面篇

2013/04/23 DOTA

[02:54]DOTA2英雄基础教程暗影牧师戴泽

2013/12/05 DOTA

[05:41]2014DOTA2西雅图国际邀请赛小组赛7月10日TOPPLAY

2014/07/10 DOTA

[03:38]TI4西雅图DOTA2前线报道 71专访

2014/07/08 DOTA

[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

Python中的魔法方法深入理解

2014/07/09 Python

简介Python设计模式中的代理模式与模板方法模式编程

2016/02/02 Python

在python中安装basemap的教程

2018/09/20 Python

canvas拼图功能实现代码示例

2018/11/21 HTML / CSS

世界汽车零件：World Car Parts

2019/09/04 全球购物

中东奢侈品购物网站：Ounass

2020/09/02 全球购物

TCP协议通讯的过程和步骤是什么

2015/10/18 面试题

会务接待方案

2014/02/27 职场文书

《草原的早晨》教学反思

2014/04/08 职场文书

给学校的建议书范文

2014/05/15 职场文书

补充协议书

2015/01/28 职场文书

技术员岗位职责

2015/02/04 职场文书

2015年食品安全工作总结

2015/05/15 职场文书

小程序wx.getUserProfile接口的具体使用

2021/06/02 Javascript

微信小程序APP的生命周期及页面的生命周期

2022/04/19 Javascript