Web上IMG淡入淡出的HTC封装

最新推荐文章于 2021-06-21 12:06:25 发布

gjd111686

最新推荐文章于 2021-06-21 12:06:25 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：经我试练的秘籍文章标签： htc web timer function behavior url

本文链接：https://blog.youkuaiyun.com/gjd111686/article/details/53323

经我试练的秘籍专栏收录该内容

36 篇文章

订阅专栏

博客展示了通过CSS的behavior属性调用Img.htc文件实现图片交互效果的代码。定义了鼠标悬停和移出时的事件处理函数，利用定时器改变图片透明度，实现动态效果。涉及到事件绑定、定时器操作和透明度调整等前端技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

IMG
{
behavior:url('Img.htc');
}

</style>

Img.htc

<PUBLIC:COMPONENT>
<PUBLIC:attach event="ondocumentready" onevent="Init()"/>
<PUBLIC:attach event="onmouseover" onevent="DefineOn()"/>
<PUBLIC:attach event="onmouseout" onevent="DefineOff()"/>
<PUBLIC:method name="DefineInit"/>
<script>
style.filter="alpha(opacity=20)";
var timer;
var initOffset;
var onOffset=5;
var offOffset=10;//偏移量
function Init()
{
initOffset=element.filters.alpha.opacity;
}
function DefineOn()
{
clearInterval(timer)
timer=window.setInterval("document.all['"+element.uniqueID+"'].DefineInit(0)",10);
}
function DefineOff()
{
clearInterval(timer)
timer=window.setInterval("document.all['"+element.uniqueID+"'].DefineInit(1)",10);
}
function DefineInit(bStatus)
{
opacty=element.filters.alpha.opacity;
if(bStatus)
{
  if(opacty>initOffset)
  {
   element.filters.alpha.opacity-=offOffset;
  }
  else
  {
   clearInterval(timer);
  }
}
else
{
  if(opacty<100)
  {
   element.filters.alpha.opacity+=offOffset;
  }
  else
  {
   clearInterval(timer);
  }
}
}
</script>
</PUBLIC:COMPONENT>