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

javascript 获取图片颜色

Apr 05 Javascript

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

Dec 17 Javascript

javascript jscroll模拟html元素滚动条

Dec 18 Javascript

点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)

Jan 02 Javascript

js函数调用的方式

May 06 Javascript

javascript实现的字符串与十六进制表示字符串相互转换方法

Jul 17 Javascript

JS+CSS实现表格高亮的方法

Aug 05 Javascript

9种改善AngularJS性能的方法

Nov 28 Javascript

使用vue中的v-for遍历二维数组的方法

Mar 07 Javascript

node puppeteer(headless chrome)实现网站登录

May 09 Javascript

vue 关闭浏览器窗口的时候,清空localStorage的数据示例

Nov 06 Javascript

Node.js操作MongoDB数据库实例分析

Jan 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

snoopy 强大的PHP采集类使用实例代码

2010/12/09 PHP

php curl 获取https请求的2种方法

2015/04/27 PHP

PHP数据库操作三：redis用法分析

2017/08/16 PHP

微信公众号开发之获取位置信息php代码

2018/06/13 PHP

PHP上传图片到数据库并显示的实例代码

2019/12/20 PHP

JavaScript 以对象为索引的关联数组

2010/05/19 Javascript

基于JQuery的Pager分页器实现代码

2010/07/17 Javascript

QQ空间顶部折页撕开效果示例代码

2014/06/15 Javascript

js调试系列源码定位与调试[基础篇]

2014/06/18 Javascript

javascript函数声明和函数表达式区别分析

2014/12/02 Javascript

一款基于jQuery的图片场景标注提示弹窗特效

2015/01/05 Javascript

JavaScript中停止执行setInterval和setTimeout事件的方法

2015/05/14 Javascript

基于JS实现密码框(password)中显示文字提示功能代码

2016/05/27 Javascript

bootstrap flask登录页面编写实例

2016/11/01 Javascript

vue2利用Bus.js如何实现非父子组件通信详解

2017/08/25 Javascript

详解Vue中使用Echarts的两种方式

2018/07/03 Javascript

使用webpack/gulp构建TypeScript项目的方法示例

2019/12/18 Javascript

[00:32]2016完美“圣”典风云人物：Maybe宣传片

2016/12/05 DOTA

基于python 字符编码的理解

2017/09/02 Python

解决Pandas的DataFrame输出截断和省略的问题

2019/02/08 Python

Django项目后台不挂断运行的方法

2019/08/31 Python

整理HTML5中支持的URL编码与字符编码

2016/02/23 HTML / CSS

MCAKE蛋糕官方网站：一直都是巴黎的味道

2018/02/06 全球购物

Burt’s Bees英国官网：世界领先的天然个人护理品牌

2020/08/17 全球购物

法国亚马逊官方网站：Amazon.fr

2020/12/19 全球购物

什么是数据库锁？Oracle中都有哪些类型的锁？

2015/08/21 面试题

公司年会搞笑主持词

2014/03/24 职场文书

2014年党的群众路线教育实践活动整改措施（个人版）

2014/09/25 职场文书

2015年世界无烟日活动总结

2015/02/10 职场文书

医院保洁员岗位职责

2015/02/13 职场文书

工作推荐信模板

2015/03/25 职场文书

庆七一晚会主持词

2015/06/30 职场文书

环境卫生标语

2015/08/03 职场文书

golang中字符串MD5生成方式总结

2021/07/04 Golang

Python实现PIL图像处理库绘制国际象棋棋盘

2021/07/16 Python

win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法

2022/08/05 数码科技