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 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
javascript实现yield的方法
Nov 06 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
ThinkPHP分页类使用详解
2014/03/05 PHP
十大使用PHP框架的理由
2015/09/26 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
JSON 数据格式详解
2017/09/13 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
深入浅析Python字符编码
2015/11/12 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python字符串常用方法
2018/06/14 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
写好自荐信的技巧
2013/11/08 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
三个儿子教学反思
2014/02/03 职场文书
优秀老师事迹材料
2014/02/05 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
个人合伙协议书范本
2014/10/14 职场文书
小学见习报告
2015/06/23 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
python代码实现备忘录案例讲解
2021/07/26 Python
Vue2.0搭建脚手架
2022/03/13 Vue.js
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫