编程 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的实现原理的模拟代码 -4 重要的扩展函数 extend

Aug 03 Javascript

jquery实现带二级菜单的导航示例

Apr 28 Javascript

基于jquery实现的自动补全功能

Mar 12 Javascript

jQuery删除一个元素后淡出效果展示删除过程的方法

Mar 18 Javascript

jQuery实现可关闭固定于底（顶）部的工具条菜单效果

Nov 06 Javascript

深入理解JavaScript程序中内存泄漏

Mar 17 Javascript

JS ES6中setTimeout函数的执行上下文示例

Apr 27 Javascript

二维码图片生成器QRCode.js简单介绍

Aug 18 Javascript

Vue.Draggable拖拽功能的配置使用方法

Jul 29 Javascript

微信小程序前端自定义分享的实现方法

Jun 13 Javascript

微信小程序wxml列表渲染原理解析

Nov 27 Javascript

ant design中upload组件上传大文件,显示进度条进度的实例

Oct 29 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 trim 去除空字符的定义与语法介绍

2010/05/31 PHP

基于ubuntu下nginx+php+mysql安装配置的具体操作步骤

2013/04/28 PHP

php安装swoole扩展的方法

2015/03/19 PHP

5款适合PHP使用的HTML编辑器推荐

2015/07/03 PHP

thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)

2016/05/27 PHP

php中访问修饰符的知识点总结

2019/01/27 PHP

JavaScript 编程引入命名空间的方法与代码

2007/08/13 Javascript

JavaScript Event学习第七章事件属性

2010/02/07 Javascript

纯JS实现动态时间显示代码

2014/02/08 Javascript

自定义jquery模态窗口插件无法在顶层窗口显示问题

2014/05/29 Javascript

jQuery中get()方法用法实例

2014/12/27 Javascript

JS实现先显示大图后自动收起显示小图的广告代码

2015/09/04 Javascript

实例详解JSON数据格式及json格式数据域字符串相互转换

2016/01/07 Javascript

JS简单实现DIV相对于浏览器固定位置不变的方法

2016/06/17 Javascript

js仿微信语音播放实现思路

2016/12/12 Javascript

详解jQuery uploadify文件上传插件的使用方法

2016/12/16 Javascript

vue2.0 和 animate.css的结合使用

2017/12/12 Javascript

浅谈JavaScript 代码简洁之道

2019/01/09 Javascript

Vue实现table上下移动功能示例

2019/02/21 Javascript

JS错误处理与调试操作实例分析

2020/04/13 Javascript

javascript 模块依赖管理的本质深入详解

2020/04/30 Javascript

vue自定义指令限制输入框输入值的步骤与完整代码

2020/08/30 Javascript

[00:32]2018DOTA2亚洲邀请赛VGJ.T出场

2018/04/03 DOTA

python中精确输出JSON浮点数的方法

2014/04/18 Python

使用XML库的方式,实现RPC通信的方法(推荐)

2017/06/14 Python

Python使用一行代码获取上个月是几月

2018/08/30 Python

Python 识别12306图片验证码物品的实现示例

2020/01/20 Python

使用python把xmind转换成excel测试用例的实现代码

2020/10/12 Python

在HTML5中如何使用CSS建立不可选的文字

2014/10/17 HTML / CSS

HealthElement海外旗舰店：新西兰大卖场

2018/02/23 全球购物

简单说下OSPF的操作过程

2014/08/13 面试题

《闻一多先生的说和做》教学反思

2014/04/28 职场文书

2014乡镇干部对照检查材料思想汇报

2014/09/26 职场文书

2014年感恩节活动策划方案

2014/10/06 职场文书

六一晚会主持词开场白

2015/05/28 职场文书

java实现web实时消息推送的七种方案

2022/07/23 Java/Android