图片淡入淡出与切换

最新推荐文章于 2020-12-29 04:46:13 发布

dengxingbo

最新推荐文章于 2020-12-29 04:46:13 发布

阅读量2.5k

点赞数

分类专栏： Web 文章标签： image timer flash function ie filter

本文链接：https://blog.csdn.net/dengxingbo/article/details/4360659

版权

Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

由于项目的需要，今天写了一个简单的图片特效，主要功能就是多张图片的轮回切换，并且加上淡入淡出特效，经测试在IE6与Firefox下可以正常运行，效果如下：

淡入淡出

主要分三步走：

第一，在BODY中添加一个制定的<DIV>标签。

第二，添加css样式。别以为这个样式没什么用，这个是因为IE6的滤镜需要初始化部分属性，当然这个部分也可以通过JS来设定：

#flash_banner{ width: 300px; height: 300px; opacity: 1; filter : alpha(opacity=100); }

最后一步就是长长的JS代码，原理很简单，就是递归来遍历图片：

<mce:script type="text/javascript" language="javascript"></mce:script>

网页的全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>淡入淡出</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* opacity: 1; filter : alpha(opacity=100); Initial the css style, ie6 require, or the code [$("flash_banner").filters.alpha.opacity)] will not work, because the filters.alpha.opacity object is not exist. width: 300px; height: 300px; The width and the height is required in the ie6, or the filter will not work.(But I try in the ie6, everything is ok ,but in the firefox ie tab(use ie6's kernel) can not work.). For the personal reason, I set the width and height in the JS code, make it work more flexile. */ #flash_banner{ width: 300px; height: 300px; opacity: 1; filter : alpha(opacity=100); }</style> <mce:script type="text/javascript" language="javascript"></mce:script> </head> <body> <div id="flash_banner"></div> </body> </html>

下载http://download.csdn.net/source/1501453

dengxingbo

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
图片淡入淡出与切换

由于项目的需要，今天写了一个简单的图片特效，主要功能就是多张图片的轮回切换，并且加上淡入淡出特效，经测试在IE6与Firefox下可以正常运行，效果如下：主要分三步走：第一，在BODY中添加一个制定的标签。第二，添加css样式。别以为这个样式没什么用，这个是因为IE6的滤镜需要初始化部分属性，当然这个部分也可以通过JS来设定： #flash_banner{
复制链接

扫一扫

专栏目录