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程序设计有所帮助。

Javascript 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
javascript 实现 原路返回
Jan 21 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
简述JS控制台的使用
Jul 15 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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密码生成类实例
2014/09/24 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
numpy下的flatten()函数用法详解
2019/05/27 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
django框架创建应用操作示例
2019/09/26 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
挂职思想汇报
2013/12/31 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
团代会开幕词
2015/01/28 职场文书
关于运动会的广播稿
2015/08/19 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python