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的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php安装swoole扩展的方法
2015/03/19 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
java实现web实时消息推送的七种方案
2022/07/23 Java/Android