郑州网站建设-凯讯公司网站宣传口号图片
郑州网站建设-凯讯公司网站电话标志图片
0371-53778175
15333818157
当前位置:网站首页 >> 建站知识 >> 网站技术 >>


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


来源:郑州凯讯网站    发布人:郑州凯讯公司    发布日期: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;,通过这样的循环,最终是图片隐含了起来,这就是图片淡出功能的实现。

本站优惠活动图片



业务联系方式图片


本页页脚banner图片

咨询热线:0371-53778175,15333818157    业务QQ:业务联系QQ图标1765879842   业务联系QQ图标2632505191   业务联系QQ图标2236519391

版权所有:郑州凯讯通信科技有限公司    备案号:豫ICP备11027744号-2