CSDN博客

img ygq3000

鼠标触发图片渐隐渐显效果HTC

发表于2004/9/16 22:39:00  717人阅读

  本例中鼠标触发的图片的渐隐渐显效果比较多见,但多数都是用js实现的,需要给图片写很多的事件与函数,如果图片过多的话,工作量会很大。为了减轻我们的工作量,就要用到这个很特殊的东西——DHTML行为(Behavior)。

  Behavior(行为)可以将复杂的DHTML代码从页面移到更小的、经过封装的、可以再度使用的单元中。其目的就是封装特定的功能在一个HTC(HTML Component)中,而这些功能就可以非常方便的捆绑到页面中的任意元素上。因此我把所有的东西都封装进了HTC文件,利用HTC的特殊性,我们可以很容易地给多个图片实现这种鼠标触发渐隐渐显效果。

  下面我们先看看具体效果演示:我们首先看到的是一个半透明的图片,当我们把鼠标放上去的时候,图片渐显;鼠标移开、图片渐隐。



  OK。先来看看插入上边那幅图片使用的代码:
-------------------------------------------------------------------------
<!--样式表部分-->
<style type="text/css">
<!--
.coolalpha {
    behavior:url(eyun_alpha.htc);
    cursor:hand;
    filter:alpha(opacity=50);
}
-->
</style>
<!--图片实现部分-->
<img class="coolalpha" link="你的链接地址" src="你的图片地址" border="0">。
----------------------------------------------------------------------------
  可以看到,图片代码比普通的<img>标签多了一个"link"属性,它的值就是点击图片后要打开文件的路径。该属性是可选的,如果你不写该属性和属性值,那么点击图片就什么都不会发生。如果你要点击图片来调用一个函数,例如:alert("Hello The World!"),那么你需要这么写:action="alert('Hello The World!')"。注意:link与action属性不能同时出现。

  而在style部分,我们使用了behavior:url(eyun_alpha.htc)这样一个特殊的语句。其中,eyun_alpha.htc就是今天的主角——封装了实现渐隐渐显效果代码的HTC文件。它的代码如下。
  eyun_alpha.htc代码及其分析如下。

-----------------------------------------------------------------------
<!--eyunalpla.htc BEGIN-->
<public:component>
<!--给对象添加方法-->
<public:method name="doAdd" />
<public:method name="doReduce" />
<!--给对象添加属性-->
<public:property name="link" value="" />
<public:property name="action" value="" />
<!--给对象添加事件-->
<public:attach event="onmouseover" onevent="doOver()" />
<public:attach event="onmouseout" onevent="doOut()" />
<public:attach event="onclick" onevent="doClick()" />
<script language="JavaScript">
var sTimer;//定义计时器全局变量
var sElementId=uniqueID; //取得对象的uniqueID

//鼠标移上时触发函数
function doOver()
  {window.clearTimeout(sTimer);
   doAdd()
  }

//鼠标移出时触发函数
function doOut()
  {window.clearTimeout(sTimer);
   doReduce();
  }

//点击图片时触发函数
function doClick()
  {if(link!="")//如果有链接,则打开链接文件
     {window.open(link);
      return;
     }
   if(action!="")//如果有调用函数,则执行。
     {eval(action);
      return;
     }
  }

function doAdd()
  {filters.alpha.opacity++;//增加透明度的值(图片会更清晰)
   sTimer=window.setTimeout(sElementId+".doAdd()",10);//每10ms再次调用本函数
  }

function doReduce()
  {if(filters.alpha.opacity>50)//如果透明度大于50%,减少透明度的值(图片会更模糊)
     filters.alpha.opacity--
   else
    {window.clearTimeout(sTimer);
     return
    }
   sTimer=window.setTimeout(sElementId+".doReduce()",10);//每10ms再次调用本函数
  }
</script>
</public:component>
<!--eyunalpla.htc END-->
-------------------------------------------------------------------------------------------------------

  只要将以上代码保存为eyun_alpha.htc,并且按照前边给出的例子那样调用,你可以通过给多个图片设置相同的class值得方法来方便的控制图片的渐隐渐显!

  以上代码在windows98/2000+IE5.0、windowsMe+IE5.5、windowsXP/2003 server+IE6.0环境下均可正常工作。
0 0

相关博文

我的热门文章

img
取 消
img