当前位置：网站首页 >> 建站知识 >> 网站技术 >>


网页制作特效：网页图片的淡入淡出效果的技术实现

来源：郑州凯讯网站    发布人：郑州凯讯公司    发布日期：2014-05-04

在河南网站建设的网页编程制作中，为实现一个技术特效，可能要煞费苦心的研究测试一番，方可实现我们想要的功能。有一种特效，比如实现网页上的淡入淡出即渐现渐隐的功能，这种功能的实现起来不是那么容易。笔者想到了利用以中特殊的方法，可以实现这个功能。在此，笔者就简单介绍一下问题，对各位网页制作编程者可作为参考使用。本文只以一个简单的例子来说明如何实现的，不再大篇幅的介绍实现的具体细节，相信各位有一定网站制作技能的技术人员都能够理解实例的功能，如有需要可以将例子融合运用到自己的网页制作中。

·实现淡入（渐现）功能：
实例代码如下：
防止图片，命名为 img1
<img src="test.jpg" name="img1" border=0 alt="测试图片" style="filter:alpha(opacity=0)">

<script language="JavaScript">
var i = 0;

//淡入函数
function fade1()
{
i++;
//设置图片的透明度
img1.filters.alpha.opacity = i;
//延时
setTimeout("fade1()",50);
}
</script>

//触发按钮
<input type="button" name="button1" value="淡入" onClick="fade1();">

在上面的例子中，函数fade1()是执行淡入功能的函数，当我们点击按钮时，将触发执行这个函数，这个函数将循环设置图片的透明度，语句为img1.filters.alpha.opacity = i;，通过这样的循环，最终是图片得以显现出来，这就是图片淡入功能的实现。

·实现淡出（渐隐）功能：
实例代码如下：
防止图片，命名为 img2
<img src="test.jpg" name="img2" border=0 alt="测试图片" style="filter:alpha(opacity=99)">

<script language="JavaScript">
var j = 100;

//淡出函数
function fade2()
{
j--;

//设置图片的透明度
img2.filters.alpha.opacity = j;

//延时
setTimeout("fade2()",50);
}
</script>

//触发按钮
<input type="button" name="button2" value="淡出" onClick="fade2();">

在上面的例子中，函数fade2()是执行淡出功能的函数，当我们点击按钮时，将触发执行这个函数，这个函数将循环设置图片的透明度，语句为img2.filters.alpha.opacity = j;，通过这样的循环，最终是图片隐含了起来，这就是图片淡出功能的实现。