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

一些有关检查数据的JS代码

Sep 07 Javascript

关于可运行代码无法正常执行的使用说明

May 13 Javascript

javascript自定义startWith()和endWith()的两种方法

Nov 11 Javascript

JavaScript将数据转换成整数的方法

Jan 04 Javascript

jQuery使用hide方法隐藏页面上指定元素的方法

Mar 30 Javascript

Angular的MVC和作用域

Dec 26 Javascript

vue使用stompjs实现mqtt消息推送通知

Jun 22 Javascript

vue 实现数字滚动增加效果的实例代码

Jul 06 Javascript

如何用Node写页面爬虫的工具集

Oct 26 Javascript

详解Vue3.0 前的 TypeScript 最佳入门实践

Jun 18 Javascript

jQuery鼠标滑过横向时间轴样式(代码详解)

Nov 01 jQuery

JS数组的常用10种方法详解

May 08 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下使用无限生命期Session的方法

2007/03/16 PHP

php出现Cannot modify header information问题的解决方法大全

2008/04/09 PHP

PHP下对字符串的递增运算代码

2010/08/21 PHP

PHP生成随机数的方法总结

2018/03/01 PHP

thinkPHP5框架实现基于ajax的分页功能示例

2018/06/12 PHP

ASP SQL防注入的方法

2008/12/25 Javascript

类似CSDN图片切换效果脚本

2009/09/17 Javascript

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

2015/08/31 Javascript

浅析函数声明和函数表达式——函数声明的声明提前

2016/05/03 Javascript

JavaScript中的Object对象学习教程

2016/05/20 Javascript

jQuery改变form表单的action,并进行提交的实现代码

2016/05/25 Javascript

微信小程序 Record API详解及实例代码

2016/09/30 Javascript

微信开发之调起摄像头、本地展示图片、上传下载图片实例

2016/12/08 Javascript

Vue.js render方法使用详解

2017/04/05 Javascript

bootstrap modal+gridview实现弹出框效果

2017/08/15 Javascript

通过源码分析Vue的双向数据绑定详解

2017/09/24 Javascript

React Native中导航组件react-navigation跨tab路由处理详解

2017/10/31 Javascript

监控Nodejs的性能实例代码

2019/07/02 NodeJs

vue.js click点击事件获取当前元素对象的操作

2020/08/07 Javascript

JS访问对象两种方式区别解析

2020/08/29 Javascript

Python函数学习笔记

2008/10/07 Python

Python中实现参数类型检查的简单方法

2015/04/21 Python

Python中实现switch功能实例解析

2018/01/11 Python

Python使用zip合并相邻列表项的方法示例

2018/03/17 Python

浅析python参数的知识点

2018/12/10 Python

Python 3.8 新功能来一波(大部分人都不知道)

2020/03/11 Python

基于python爬取有道翻译过程图解

2020/03/31 Python

解决pymysql cursor.fetchall() 获取不到数据的问题

2020/05/15 Python

css3实现垂直下拉动画菜单示例

2014/04/22 HTML / CSS

泰国王权免税店官方网站：KingPower

2019/03/11 全球购物

经典大学生求职信范文

2014/01/06 职场文书

运动会广播稿400字

2014/01/25 职场文书

齐云山导游词

2015/02/06 职场文书

就业意向书范本

2015/05/11 职场文书

2015年主婚人婚礼致辞

2015/07/28 职场文书

Apache Pulsar集群搭建部署详细过程

2022/02/12 Servers