CSS Filter 过滤器 +JS 实现幻灯片播放

2011-09-21 17:06 沐海阅读(643) 评论(0) 收藏举报

<!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>
    <title></title>
    <meta http-equiv="x-ua-compatible" content="ie=7,ie6" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .lstyle
        {
            font-size: 14px;
            font-weight: bold;
            color: #004986; /*#996633;*/
            float: left;
        }
        .rstyle
        {
            font-size: 14px;
            font-weight: bold;
            color: #004986; /*#0066FF;*/
            float: left;
        }
    </style>
    <style type="text/css">
        .cutLen
        {
            width: 170px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            float: left;
        }
    </style>


    <script type="text/javascript">
        function LoadAll() {
                        //getNewsPhoto(5, 3, "../Articles/ArticlesUtil.aspx", "photolists");
                }
    </script>

</head>
<body onload="LoadAll();">
    <!--首页中-->
    <div id="box-center">
         <!--主新闻区域-->
        <div class="c-center">
            <!--头条新闻-->
            <!--教育新闻开始-->
            <div class="ibox">
                <div class="ibox3-top">
                    <div class="ibox3-top1">
                        <div class="ibox3-top2-t1 font14 font3">
                            图片新闻</div>
                        <a href="../Articles/CheckArticles.aspx?flag=3" id="link_new_1">>>更多</a>
                    </div>
                </div>
                <!--第一层新闻开始-->
                <div class="iboxcon ibox1-con h25">
                    <!--图片幻灯-->
                    <div class="box-pc-news1">
                        <div style="height: 272px; overflow: hidden; border: 0">
                            <div id="photocontent">
                                <div id="focus_photo" style="overflow: hidden;">
                                    <div>
                                        <a id="focus_photo_url" target="_blank">
                                            <img id="focus_photo_pic" width="325" height="275" alt="" style="margin-left: border: 0px solid #000000;
                                                filter: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23);" /></a>
                                    </div>
                                    <div style="filter: alpha(style=0,opacity=60,finishOpacity=90); text-align: right;
                                        top: -25px; position: relative; margin: 0px; height: 20px; border: 0px; padding-top: 1px;
                                        z-index: 4000;">
                                        <div id="focus_photo_nav">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="photolists" runat="server">
                            </div>
                        </div>
                        <div id="focus_photo_title">
                            <a id="focus_title_url" target="_blank"></a>
                        </div>

                        <script language="JavaScript" type="text/javascript">
                            function getObject(o) {
                                if (!getObject) { return null; };
                                o = (typeof o == 'string') ? document.getElementById(o) : o;
                                return o;
                            }
                            if (typeof photolist != 'function') {
                                var photolist = function() {
                                    var a;
                                    var img;
                                    var title;
                                }
                            }

                            /*处理数组*/
                            var plist = getObject("photolists");
                            plist.style.display = 'none';
                            var Photos = new Array();
                            var Num = 0;
                            if (plist) {
                                var n = plist.getElementsByTagName("p");
                                for (var i = 0; i < n.length; i++) {
                                    var p = new photolist();
                                    p.a = n[i].getElementsByTagName("A")[0];
                                    p.img = n[i].getElementsByTagName("IMG")[0];
                                    p.title = p.a.innerHTML;
                                    if (p.a && p.img && p.title) {
                                        Photos[Num] = p; Num++;
                                    }
                                }
                                var focus_photo_nav = getObject("focus_photo_nav");
                                for (var i = 1; i < Photos.length + 1; i++) {
                                    var y = document.createElement("a");
                                    y.appendChild(document.createTextNode(i));
                                    y.id = "xxjdjj" + i;
                                    y.className = "axx";
                                    y.target = "_self";
                                    y.href = "javascript:changeimg(" + i + ");";
                                    focus_photo_nav.appendChild(y);
                                }
                            }
                            /*处理数组结束*/

                            var nn = 1; //当前所显示的滚动图
                            var key = 0; //标识是否为第一次开始执行
                            var tt; //标识作用

                            function change_img() {
                                if (key == 0) { key = 1; } //如果第一次执行KEY=1，表示已经执行过一次了。
                                else if (document.all)//document.all仅IE6/7认识，firefox不会执行此段内容
                                {
                                    getObject("focus_photo_pic").filters[0].Apply(); //将滤镜应用到对像上
                                    getObject("focus_photo_pic").filters[0].Play(duration = 2); //开始转换
                                    getObject("focus_photo_pic").filters[0].Transition = 23; //转换效果
                                }

                                try {
                                    getObject("focus_photo_pic").src = Photos[nn - 1].img.src; //替换图片
                                    getObject("focus_photo_url").href = Photos[nn - 1].a.href; //替换URL
                                    getObject("focus_title_url").href = Photos[nn - 1].a.href; //替换URL
                                    getObject("focus_title_url").innerHTML = Photos[nn - 1].title; //替换title

                                    for (var i = 1; i <= Num; i++) {
                                        getObject("xxjdjj" + i).className = 'axx'; //将下面黑条上的所有链接变为未选中状态
                                    }

                                    getObject("xxjdjj" + nn).className = 'bxx'; //将当前页面的ID设置为选中状态
                                    nn++;
                                    if (nn > Num) { nn = 1; } //如果ID大于总图片数量。则从头开始循环  
                                }
                                catch (err) {
                                    //alert(err);
                                }

                                tt = setTimeout('change_img()', 7000); //在4秒后重新执行change_img()方法.
                            }
                            function changeimg(n)//点击黑条上的链接执行的方法
                            {
                                nn = n; //当前页面的ID等于传入的N值,
                                window.clearInterval(tt); //清除用于循环的TTn
                                //重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
                                change_img();
                            }
                            //开始执行滚动操作
                            change_img();
                        </script>

                    </div>
                    <!--图片幻灯结束-->
                    <div class="box-con-news10">
                        <!--新闻板块1-->
                        <ul id="con_new_1">
                            <div>
                                <ul id="news">
                                </ul>
                            </div>
                        </ul>
                    </div>
                    <div class="clear">
                    </div>
                </div>
</body>
</html>

渐层

filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )

属性：

enabled

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

true	:	默认值。滤镜激活。
false	:	滤镜被禁止。

duration

可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。

transition

可选项。整数值(Integer)。设置或检索转换所使用的方式。

0	:	矩形收缩转换。
1	:	矩形扩张转换。
2	:	圆形收缩转换。
3	:	圆形扩张转换。
4	:	向上擦除。
5	:	向下擦除。
6	:	向右擦除。
7	:	向左擦除。
8	:	纵向百叶窗转换。
9	:	横向百叶窗转换。
10	:	国际象棋棋盘横向转换。
11	:	国际象棋棋盘纵向转换。
12	:	随机杂点干扰转换。
13	:	左右关门效果转换。
14	:	左右开门效果转换。
15	:	上下关门效果转换。
16	:	上下开门效果转换。
17	:	从右上角到左下角的锯齿边覆盖效果转换。
18	:	从右下角到左上角的锯齿边覆盖效果转换。
19	:	从左上角到右下角的锯齿边覆盖效果转换。
20	:	从左下角到右上角的锯齿边覆盖效果转换。
21	:	随机横线条转换。
22	:	随机竖线条转换。
23	:	随机使用上面可能的值转换。

特性：

Enabled

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

Duration

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

Transition

可读写。整数值(Integer)。参阅 transition 属性。

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 事件。无返回值。

说明：

提供了24种转换对象内容的效果。

示例：

#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); }

刷新页面返回顶部

沐海—化茧成蝶一只井底之蛙，你什么时候才能真正的向自己的脚下一点点的垫石头。而不是以为天下只有井口那么大。