编程 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注册事件的常用方法

Apr 03 Javascript

jquery自定义下拉列表示例

Apr 25 Javascript

javascript属性访问表达式用法分析

Apr 25 Javascript

基于jQuery 实现bootstrapValidator下的全局验证

Dec 07 Javascript

AngularJS获取json数据的方法详解

May 27 Javascript

JavaScript插件Tab选项卡效果

Nov 14 Javascript

Vue实现导出excel表格功能

Mar 30 Javascript

详解vue后台系统登录态管理

Apr 02 Javascript

layui-table表复选框勾选的所有行数据获取的例子

Sep 13 Javascript

vue实现弹幕功能

Oct 25 Javascript

浅谈vue的第一个commit分析

Jun 08 Javascript

Vue实现购物小球抛物线的方法实例

Nov 22 Vue.js

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个人网站架设连环讲(四)

2006/10/09 PHP

php学习函数课件

2008/06/15 PHP

PH P5.2至5.5、5.6的新增功能详解

2014/07/14 PHP

thinkphp模板的包含与渲染实例分析

2014/11/26 PHP

PHP7新增运算符用法实例分析

2016/09/26 PHP

在Z-Blog中运行代码[html][/html]（纯JS版）

2007/03/25 Javascript

js trim函数去空格函数与正则集锦

2009/11/20 Javascript

Javascript动态绑定事件的简单实现代码

2010/12/25 Javascript

jquery索引在使用中的一些困惑

2013/10/24 Javascript

node.js中的fs.chmod方法使用说明

2014/12/18 Javascript

javascript操作ul中li的方法

2015/05/14 Javascript

基于JavaScript短信验证码如何实现

2016/01/24 Javascript

JQuery日期插件datepicker的使用方法

2016/03/03 Javascript

基于JavaScript实现回到页面顶部动画代码

2016/05/24 Javascript

jQuery实现邮箱下拉列表自动补全功能

2016/09/08 Javascript

Vue.js路由vue-router使用方法详解

2017/03/20 Javascript

详解express与koa中间件模式对比

2017/08/07 Javascript

微信小程序实现流程进度的图样式功能

2018/01/16 Javascript

es6新特性之 class 基本用法解析

2018/05/05 Javascript

基于layui实现高级搜索（筛选）功能

2019/07/26 Javascript

vue-router 控制路由权限的实现

2020/09/24 Javascript

[01:10]DOTA2次级职业联赛 - U5战队宣传片

2014/12/01 DOTA

Python sys.argv用法实例

2015/05/28 Python

python使用xmlrpclib模块实现对百度google的ping功能

2015/06/02 Python

python基础_文件操作实现全文或单行替换的方法

2017/09/04 Python

Django框架之DRF 基于mixins来封装的视图详解

2019/07/23 Python

Django自带日志 settings.py文件配置方法

2019/08/30 Python

学会python自动收发邮件代替你问候女友

2020/05/20 Python

python中setuptools的作用是什么

2020/06/19 Python

利用纯CSS3实现动态的自行车特效源码

2017/01/20 HTML / CSS

Tretorn美国官网：瑞典外套和鞋类品牌，抵御风雨

2018/07/19 全球购物

莫斯科隐形眼镜网上商店：Linzi

2019/07/22 全球购物

公司庆典活动邀请函

2014/01/09 职场文书

网上祭英烈活动总结

2015/02/04 职场文书

中国古代史学名著《战国策》概述

2019/08/09 职场文书

Redis如何一键部署脚本

2021/04/12 Redis