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

原创 2004年09月16日 22:39:00
  本例中鼠标触发的图片的渐隐渐显效果比较多见,但多数都是用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环境下均可正常工作。

C#中窗体渐显渐隐

资源设计时,先将窗体的Opacity属性值设置为0% 然后往窗体上放置一个100ms定时器, 其Enable属性设置为true, 然后编写如下代码:   private bool bExitFor...
  • xingyu_soft
  • xingyu_soft
  • 2016年02月22日 09:13
  • 792

如何实现先渐显再渐隐的动画?

我们知道在Android中Animation是实现动画的类,而AlphaAnimation是sh
  • cjllife
  • cjllife
  • 2014年08月28日 10:07
  • 614

用TransitionDrawable实现ImageView渐隐渐显过渡效果,并解决OutOfMemory问题

用TransitionDrawable实现ImageView渐隐渐显效果,解决OutOfMemory问题 感谢 http://adk.tumblr.com/post/13069401302/out...
  • heqiangflytosky
  • heqiangflytosky
  • 2014年02月28日 21:34
  • 2892

js鼠标经过,实现图片的渐隐渐现

*{padding: 0;margin: 0;} body{background-color: #d8d8d8;} #box{width:400px;height:320px;opacit...
  • Ag_wenbi
  • Ag_wenbi
  • 2016年10月13日 18:12
  • 387

JQuery:渐隐渐显图片轮换幻灯片

来自:http://outofmemory.cn/code-snippet/4443/jQuery-liangge-with-jQuery-jianyin-jianxian-tupian-lunhua...
  • wowtous
  • wowtous
  • 2013年11月15日 17:49
  • 1204

Android实现动画效果之淡入淡出

View渐隐动画效果 /** * View渐隐动画效果 */ public void setHideAnimation( View view, int duration...
  • u010949451
  • u010949451
  • 2017年01月08日 18:39
  • 3130

使用CanvasGroup实现渐隐渐显效果

在为image添加组件的时候我们发现一个Canvas Group的组件 添加了这个组件,我们发现几个值 Alpha:该组UI元素的透明度. 这里的alpha值与color.a是对应...
  • qq_26270779
  • qq_26270779
  • 2017年07月10日 11:54
  • 746

弹窗渐隐渐出效果

经常看到有各种各样的弹窗,一直不知道是怎么回事,查了查,原理挺简单的。 先贴出html/css代码 .back { display:none; position:absolute; top:0;...
  • tianxuezhi_s
  • tianxuezhi_s
  • 2014年03月03日 17:26
  • 687

HTML 图片鼠标悬停动态效果

法一: 在head中添加: window.onload = function(){  var img = document.getElementById("imgTest...
  • EsonJohn
  • EsonJohn
  • 2016年02月17日 17:01
  • 2028

Toolbar滚动渐显类似Google+用户界面滑动效果(一)

Toolbar滚动渐显类似Google+用户界面滑动效果(一)@(Blog)[马克飞象|Markdown|Android]Toolbar滚动渐显类似Google用户界面滑动效果一 最终效果 实现 布局...
  • a379992210
  • a379992210
  • 2015年07月30日 08:35
  • 4119
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标触发图片渐隐渐显效果HTC
举报原因:
原因补充:

(最多只允许输入30个字)