Javascript实现经典的图片切换效果

最新推荐文章于 2024-06-27 12:49:37 发布

木冰云

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量2.9k

点赞数

分类专栏： JavaScript 文章标签： javascript class div integer button border

JavaScript 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

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 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。

运行代码框

<html xmlns:rdl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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>

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.οnlοad=rdl_doInit;
</script>

</head>
<body>
<div id=idParentDiv>
<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>
<table><tr><td>
<select id=idSel1 οnchange="rdl_change();">
<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>
<select id=idSel2 οnchange="rdl_change();">
<option value="50" style="font-weight:bold;">---MaxSquare---
<option value="25">25
<option value="10">10
<option value="5">5
</select>
</td><td>
<input type=button value=" Play " οnclick="if (oParentDiv!=null) rdl_play();">
</td><td>
<input type=button value=" Stop " οnclick="if (oParentDiv!=null) oParentDiv.filters[0].stop();">
</td></tr></table>
<br>
<div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Pixelate (enabled="false")</div>

<br> <br> <br>
<div</p><div id="ad_f10" class="ad_f10"><SCRIPT src="/ad/ad_f10.js"></SCRIPT></div><div id="ad_f11" class="ad_f11"><SCRIPT src="/ad/ad_f11.js"></SCRIPT></div><div class='kjy'><strong>文章整理:</strong><a href='http://www.diybl.com' target=_blank><strong><font color="#CC0000">DIY部落</font></strong></a> <strong>http://www.diybl.com</strong> (本站) 　　<a href="javascript:self.location='/user/chm/rar.asp?c_id=4361'" class="redlink">【点击打包该文章】</a></div><div class=kvl> [1] <a href=http://www.diybl.com/course/1_web/javascript/Javascriptshl/200721/4361_2.html> [2]</a></div></DIV><div id="ad_f4" class="ad_f4"><SCRIPT src="/ad/ad_f4.js"></SCRIPT></div>
      <DIV class=mediacontent>如果图片或页面不能正常显示请<a onClick="openerror('4361','Javascript实现经典的图片切换效果');" onMouseOver="this.style.cursor='hand';" class="redlink">点击这里</a>　站内搜索：
        <input type="text" name="wd3" size="25" maxlength="255">
<input type="button" value="千寻搜索" onClick="tosearch(document.all.wd3);"></DIV>
<DIV style="CLEAR: both" align=center></DIV>
      <DIV class=toollinks>【<A href="javascript:window.external.addFavorite(window.location,'Javascript实现经典的图片切换效果-DIY部落');">收藏此页</a>】【<A
      href="http://www.diybl.com/course/1_web/javascript/Javascriptshl/2afdokf.html" target="_blank">栏目页面</A>】【<A href="#comment">发表评论</A>】【<a href="#">返回顶部</a>】【<A
      href="javascript:window.close()">关闭</A>】 </DIV>
   <div class="p_bottom">上一篇文章：<a href="/course/1_web/javascript/Javascriptshl/200721/4362.html">COOL而实用的动态效果</a><br>下一篇文章：<a href="/course/1_web/javascript/Javascriptshl/200721/4360.html">用Groovy Template 生成代码</a></div></DIV>
      <DIV style="CLEAR: both; BACKGROUND: #fff; OVERFLOW: hidden; HEIGHT: 8px"></DIV>
      <DIV id=links align=center>
      <TABLE class=xgzt cellSpacing=0 cellPadding=0 width=687>
        <TBODY>
        <TR>
          <TD style="PADDING-LEFT: 5px" bgColor=#e1effa>
            <H3>推荐文章</H3></TD></TR>
        <TR>
          <TD bgColor=#fcfeff><div class="tj_l tj"><nobr><a href="/course/1_web/javascript/Javascriptshl/200721/4176.html" target="_blank">如何实现HTML页面地址栏参数传递与获取</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4211.html" target="_blank">非常实用的效果：用JS计算剩余可用字数</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4599.html" target="_blank">【推荐】非常不错的Javascript脚本</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4229.html" target="_blank">JavaScript应用实例：点出统计器</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4659.html" target="_blank">用JavaScript自动生成等比例所略图</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4354.html" target="_blank">JavaScript实现AJAX的拖动效果</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4602.html" target="_blank">用Javascript使网页图片产生旋转效果</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4270.html" target="_blank">浏览器语种检测，适合于多语言版本的站点</a></div><div class="tj_r tj"><nobr><a href="/course/1_web/javascript/Javascriptshl/20061218/1223.html" target="_blank">js“树”读取xml数据</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4597.html" target="_blank">参数传递解决window.open的session变量丢失</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4693.html" target="_blank">实现Web页面上的右键快捷菜单</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4287.html" target="_blank">一款DIV+CSS导航条效果</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4396.html" target="_blank">AJAX案例研究之详细剖析Gmail应用</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4126.html" target="_blank">JS开发字典探测用户名或密码工具</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4715.html" target="_blank">网页中图片的随机显示</a><br><a href="/course/1_web/javascript/Javascriptshl/200721/4606.html" target="_blank">基于Ajax的应用程序架构汇总</a></div>
            </TD>
        </TR></TBODY></TABLE>
      </DIV>
   <DIV style="CLEAR: both; BACKGROUND: #fff; OVERFLOW: hidden; HEIGHT: 8px"></DIV>
            <div class="cleanblock2" style="background:#ededed; border:1px solid #dedfde"><h3>文章评论</h3></div>
   <div class="cleanblock3"><iframe name="pindex" src="/user/showcomment2.asp?c_id=4361" frameborder=false scrolling="no" width="100%" height="0" class="comm_index" οnlοad="window.setTimeout('iframe_resize()',1000)"></iframe></div>
   <DIV style="CLEAR: both; BACKGROUND: #fff; OVERFLOW: hidden; HEIGHT: 8px"></DIV>
   <form action="/user/comment.asp?id=4361&url=http://www.diybl.com/course/1_web/javascript/Javascriptshl/200721/4361.html" style="margin-top:0px;" method="post">
   <div class="comment_1">
<div class="cleanblock2"><a name="comment"></a><h3>请您留言</h3></div>
<div class="cleanblock" style="padding-left:20px; padding-right:20px">
    <label for="label">昵称:
    <input name="hypocorism" type="text" size="15" value="DIY部落网友" onClick="this.focus();this.select()"maxlength="20">
    　　　　 <a href="/user/register.asp" target="_blank"><font color=red>注册会员</font></a> <a href="/user/login.asp" target="_blank">会员登陆</a>
    <br />
    <span style="line-height:25px"><a href="/user/chgpage/cata.asp?num=1010802" target="_blank"><font color="#990000"><strong>点击这里</strong></font></a></span> 自己制作打包的chm电子书教程
    <textarea name="content" style="VERTICAL-ALIGN: text-top; WIDTH: 100%; HEIGHT: 7em" rows="6" onFocus="showchk();">