编程 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 多种变量定义(对象直接量，数组直接量和函数直接量)

May 24 Javascript

jQuery1.5.1 animate方法源码阅读

Apr 05 Javascript

浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题

Jun 11 Javascript

JS控制表单提交的方法

Jul 09 Javascript

jQuery实现的tab标签切换效果示例

Sep 05 Javascript

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

Oct 30 Javascript

jQuery实现单击按钮遮罩弹出对话框效果（1）

Feb 20 Javascript

JS高仿抛物线加入购物车特效实现代码

Feb 20 Javascript

javascript ES6 新增了let命令使用介绍

Jul 07 Javascript

JS实现快速比较两个字符串中包含有相同数字的方法

Sep 11 Javascript

React Native 通告消息竖向轮播组件的封装

Aug 25 Javascript

vuex管理状态刷新页面保持不被清空的解决方案

Nov 11 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

smarty模板中使用get、post、request、cookies、session变量的方法

2014/04/24 PHP

php从数组中随机选择若干不重复元素的方法

2015/03/14 PHP

php实现在限定区域里自动调整字体大小的类实例

2015/04/02 PHP

thinkPHP实现MemCache分布式缓存功能

2016/03/23 PHP

让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

2009/08/04 Javascript

基于jQuery的表格操作插件

2010/04/22 Javascript

js 数组的for循环到底应该怎么写？

2010/05/31 Javascript

最新的10款jQuery内容滑块插件分享

2011/09/18 Javascript

解决jquery中美元符号命名冲突问题

2014/01/08 Javascript

js操作IE浏览器弹出浏览文件夹可以返回目录路径

2014/07/14 Javascript

JQuery复制DOM节点的方法

2015/06/11 Javascript

基于JS+Canves实现点击按钮水波纹效果

2016/09/15 Javascript

Angular2使用Angular CLI快速搭建工程（一）

2017/05/21 Javascript

详解angularJs中关于ng-class的三种使用方式说明

2017/06/02 Javascript

利用Three.js如何实现阴影效果实例代码

2017/09/26 Javascript

vue2.0 自定义饼状图 (Echarts)组件的方法

2018/03/02 Javascript

JS实现获取进今年第几天是周几的方法分析

2018/06/27 Javascript

js+html5实现手机九宫格密码解锁功能

2018/07/30 Javascript

layer.confirm取消按钮绑定事件的方法

2018/08/17 Javascript

一步步教你利用Docker设置Node.js

2018/11/20 Javascript

JS事件绑定的常用方式实例总结

2019/03/02 Javascript

小程序rich-text组件如何改变内部img图片样式的方法

2019/05/22 Javascript

详解nuxt 微信公众号支付遇到的问题与解决

2019/08/26 Javascript

JavaScript 事件代理需要注意的地方

2020/09/08 Javascript

[00:02]DOTA2新版本使用PA至宝后暴击展示

2014/11/19 DOTA

[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片

2015/03/09 DOTA

[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集

2016/03/06 DOTA

Python补齐字符串长度的实例

2018/11/15 Python

解决pyqt5中QToolButton无法使用的问题

2019/06/21 Python

Python魔法方法容器部方法详解

2020/01/02 Python

python 伯努利分布详解

2020/02/25 Python

python中return不返回值的问题解析

2020/07/22 Python

环法自行车赛官方商店：Le Tour de France

2017/08/27 全球购物

用Python selenium实现淘宝抢单机器人

2021/06/18 Python

Tomcat执行startup.bat出现闪退的原因及解决办法

2022/04/20 Servers

Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法

2023/01/09 数码科技