当前位置: 王朝网络 >> html/css/js >> &#106avascript实现经典的图片切换效果

&#106avascript实现经典的图片切换效果

王朝html/css/js·作者佚名 2006-11-24

窄屏简体版字體: 小|中|大|超大

css 滤镜： Pixelate

Pixelate兼容性：IE5.5+

语法：

filter : progid:DXImageTransform.Microsoft.Pixelate ( enabled=bEnabled , duration=fDuration , maxSquare=iWidth )

属性

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。

false : 滤镜被禁止。

duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。

你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。

maxSquare : 可选项。整数值(Integer)。设置或检索转换中矩形色块的最大宽度。取值范围为 2 - 50 。默认值为 50 。

特性：

Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。

Duration : 可读写。浮点数(Real)。参阅 duration 属性。

MaxSquare : 可读写。整数值(Integer)。参阅 maxSquare 属性。

Percent : 可读写。字符串(String)。设置或检索当前静态滤镜输出在转换进程中所处的点。取值范围为 0 - 100 。默认值为 0 ，转换尚未开始。 100 为转换完成。

此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤：

使用转换滤镜的 apply 方法。这将捕获对象内容的初始显示，设置 Percent 特性值为 0 。

改变对象内容。如 visibility ， innerText ， background-color ， border ，或者其子对象的属性。

设置转换滤镜的 Percent 特性。即确定你希望的转换进程中某一点。这将捕获到转换进程中在该点处的一张内容图像。

设置转换滤镜的 Enabled 特性值为 true 。则滤镜作用的对象将依据获取到的图像更新其内容。

请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。

status : 只读。整数值(Integer)。检索转换的当前状态。0 | 1 | 2 0 : 转换停止(stop)。

1 : 转换被应用(apply)。

2 : 转换在进行(play)。

方法：

apply : 捕获对象内容的初始显示，为转换做必要的准备。无返回值。

当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用 play 方法开始转换。

请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。

当你调用 play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的 visibility 属性的改变)。

play ( iDuration ) : 开始转换。无返回值。参数见下表。

iDuration : 可选项。浮点数(Real)。指定滤镜作用持续的时间。默认单位为秒。

使用 play 方法的 iDuration 参数设置转换回放的持续时间，其值在转换的当前一个周期内会替换 Duration 属性的设置。但是下一次转换会恢复使用 Duration 属性设置的值。

stop : 停止转换回放。并呈现转换结果图像。同时激发 onfilterchange 事件。无返回值。

说明：

这个转换滤镜是一个复杂的视觉效果。在转换的前半段，对象内容先显示为矩形色块拼贴，然后矩形的宽度由一个像素增加至 MaxSquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段，矩形被还原为新内容具体的图像像素，显示出新的内容。

在使用此转换滤镜前设置此滤镜的 Enabled 特性值为 false 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。

运行代码框

<head>

<title>Rainer's Handbook</title>

<style>

body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;}

body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;}

table,img{border:0px;}

a{text-decoration:none;color:#003399;}

a:hover{color:#000000;text-decoration:underline;}

#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}

#id_span3{font-size:10px;font-family:tahoma;}

</style>

<style>

#idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;filter:progid:DXImageTransform.Microsoft.Pixelate(enabled="false");}

#idDiv1{width:200px;height:100px;background-color:#000000;color:#FFFFFF;padding:4px;position:absolute;z-index:3;visibility:hidden;}

#idDiv2{width:200px;height:100px;background-color:#000000;color:#FFFFFF;padding:4px;position:absolute;z-index:4;visibility:visible;}

#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}

</style>

var sBaseStr="filter : progid:DXImageTransform.Microsoft.Pixelate ( ";

var oParentDiv,oCodeDiv;

function rdl_doInit(e){

oParentDiv=document.all("idParentDiv");

oCodeDiv=document.all("idCodeDiv");

rdl_play();

}

function rdl_change(e){

with (document.all("idSel1")) var sValue1=options[selectedIndex].value;

with (document.all("idSel2")) var sValue2=options[selectedIndex].value;

oCodeDiv.innerText=sBaseStr+",enabled="+oParentDiv.filters[0].enabled+",duration="+sValue1+",maxSquare="+sValue2+" ) ;";

with (oParentDiv.filters[0]) {

Duration=sValue1;MaxSquare=sValue2;

}

function rdl_play(){

with (oParentDiv) {

if (children[0].style.visibility=="hidden") children[1].style.visibility="visible";

else children[1].style.visibility="hidden";

filters[0].Apply();

if (children[0].style.visibility=="hidden") children[0].style.visibility="visible";else children[0].style.visibility="hidden";

if (children[1].style.visibility=="hidden") children[1].style.visibility="visible";else children[1].style.visibility="hidden";

filters[0].play();

}

window.onload=rdl_doInit;

</script>

</head>

<body>

<div id=idDiv1><img src="http://www.blueidea.com/articleimg/bbsimg/topic5.gif" style="float:left;border:1px solid #FFFFFF;">我是合成滤镜获取的输入<b> A </b>。</div>

<div id=idDiv2><img src="http://www.blueidea.com/articleimg/bbsimg/reply5.gif" style="float:left;border:1px solid #FFFFFF;">我是合成滤镜获取的输入<b> B </b>。</div>

</div>

<br>

<option value="0.5" style="font-weight:bold;">---Duration---

<option value="1">1

<option value="2">2

<option value="4">4

<option value="5">5

<option value="6">6

<option value="12">12

</select>

</td><td>

<option value="50" style="font-weight:bold;">---MaxSquare---

<option value="25">25

<option value="10">10

<option value="5">5

</select>

</td><td>

</td><td>

</td></tr></table>

<br>

<div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Pixelate (enabled="false")</div>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

forestgan写的效果如下:

var slidespeed=3000

//specify images

var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg")

//specify corresponding links

var slidelinks=new Array("#","#","#")

var imageholder=new Array()

var ie55=window.createPopup

for (i=0;i<slideimages.length;i++){

imageholder[i]=new Image()

imageholder[i].src=slideimages[i]

}

function gotoshow(){

window.location=slidelinks[whichlink]

}

//-->