js实现九宫格图片半透明渐显特效的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现九宫格拼图小游戏

    js实现九宫格拼图小游戏

    效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

  • JS模仿手机端九宫格登录功能实现代码

    JS模仿手机端九宫格登录功能实现代码

    最近没有项目做,闲来无事写了一个小demo,特此分享到我们平台,供大家参考下,本文写的不好还请各位大侠见谅! 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分: 首先我们先画出两个九宫格,一个用于登录和首次设置滑动密码使用,另个用于再次设置滑动密码,用于与第一次输入的滑动密码进行对比,判断两次密码是否一致 第一个九宫格 $("#gesturepwd").GesturePasswd({ backgroundColor: "#25

  • javascript解三阶幻方（九宫格）

    谜题:三阶幻方, 试将1~9这9个不同整数填入一个3×3的表格,使得每行.每列以及每条对角线上的数字之和相同. 策略:穷举搜索.列出所有的整数填充方案,然后进行过滤. 亮点为递归函数getPermutation的设计,文章最后给出了几个非递归算法 // 递归算法,很巧妙,但太费资源 function getPermutation(arr) { if (arr.length == 1) { return [arr]; } var permutation = []; for (var i = 0;

  • javascript实现九宫格相加数值相等

    javascript实现九宫格相加数值相等

    本文实例介绍了javascript实现九宫格的对应方法,分享给大家供大家参考,具体内容如下 实现思路: 1.每个格子输入的数值必须为数字: 2.输入数值不能重复: 3.输入数值不能小于1或大于9: 4.数值不能为空: 5.相加方式共8个,分别为横向三个.纵向三个.两条对角线两个值.详情如下: 解释:  以每个格子所标记序号为标识: 横向三个值:0-2,3-4,6-8: 纵向三个值:[0,3,6].[1,4,7].[2,5,8]: 对角线两个值:[0,4,8].[2,4,6] 实现过程: 很简单,

  • javascript九宫格图片随机打乱位置的实现方法

    javascript九宫格图片随机打乱位置的实现方法

    今天就做个九宫格的简易拼图,最让我头疼的就是点击开始打乱图片位置.一开始在百度查看相关博客,走了很多弯路.最后看了众多的例子,自己写了个方法. <script> //打乱图片方法 function fun(){ var x = []; var y ; for(var i=1;i<10;i++){ var div = document.getElementById("d"+i+""); div.removeChild(document.getElem

  • 基于javascript实现九宫格大转盘效果

    基于javascript实现九宫格大转盘效果

    本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:

  • javascript+canvas制作九宫格小程序

    js核心代码 复制代码 代码如下: /*  *canvasid:html canvas标签id  *imageid:html img 标签id  *gridcountX:x轴图片分割个数  *gridcountY:y轴图片分割个数  *gridspace:宫格空隙  *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量  **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量  *isanimat:是否启用动画显示  */ function ImageGrid(can

  • js实现九宫格的随机颜色跳转

    js实现九宫格的随机颜色跳转

    效果如下: 图(1)  初始图 图(2)  开始闪 代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body

  • js实现九宫格图片半透明渐显特效的方法

    本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible {  FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f

  • javascript实现图片循环渐显播放的方法

    本文实例讲述了javascript实现图片循环渐显播放的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>图片的循环渐显播放效果代码</title> <head> <!--1.将下面的代码插入到HEML的<head></head>之间: --> <script language=javaScript> <!--// sandra0 = new Image()

  • jQuery实现的感应鼠标悬停图片色彩渐显效果

    本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • js实现按钮控制图片360度翻转特效的方法

    本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o

  • js图片模糊切换显示特效的方法

    本文实例讲述了js图片模糊切换显示特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>一款图片模糊切换显示效果</title> <body> <script language="JavaScript1.1"> <!-- var slidespeed=3000 var slideimages=new Array("/images/m01.jpg",&q

  • js实现类似新浪微博首页内容渐显效果的方法

    本文实例讲述了js实现类似新浪微博首页内容渐显效果的方法.分享给大家供大家参考.具体分析如下: 要点一: if(list_li.length>=1){ list.insertBefore(li,list_li[0]); }else{ list.appendChild(li); } 从在前面插入新内容,如果没有新内容,就是在后面插入新内容. 要点二: var height=li.offsetHeight; li.style.height='0'; 取得li的高度,然后再li的高度设置为0,因为高度

  • JS实现判断图片是否加载完成的方法分析

    本文实例讲述了JS实现判断图片是否加载完成的方法.分享给大家供大家参考,具体如下: 1.onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <img src="images/background.png"> <p>loading...</p> <script type=&qu

  • js实现iGoogleDivDrag模块拖动层拖动特效的方法

    本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • JS实现随机乱撞彩色圆球特效的方法

    本文实例讲述了JS实现随机乱撞彩色圆球特效的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现的随机乱撞的彩色圆球特效代码</title> <style> body{ font-family: 微软雅黑; } body,h1{ margin

  • JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

    JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

    本文实例讲述了JS实现获取图片大小和预览的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

随机推荐