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


    <!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
            {
                 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 为转换完成。
    此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤:
    1. 使用转换滤镜的 apply 方法。这将捕获对象内容的初始显示,设置 Percent 特性值为 0
    2. 改变对象内容。如 visibility innerText background-color border ,或者其子对象的属性。
    3. 设置转换滤镜的 Percent 特性。即确定你希望的转换进程中某一点。这将捕获到转换进程中在该点处的一张内容图像。
    4. 设置转换滤镜的 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; 250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); }
    本人声明: 个人主页:沐海(http://www.cnblogs.com/mahaisong) 以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ!欢迎交流!
  • 相关阅读:
    centos7-根据端口号查看所属应用
    centos7-网络与防火墙常用命令
    docker(5)常用命令
    docker(4)使用Dockerfile文件创建镜像-对docker(3)的改进
    [多校联考2021] 模拟赛4
    [省选前集训2021] 模拟赛7
    [多校联考2021] 模拟赛3
    [学习笔记] 圆方树
    [多校联考2021] 模拟赛2
    [学习笔记] 反悔贪心
  • 原文地址:https://www.cnblogs.com/mahaisong/p/2184238.html
Copyright © 2020-2023  润新知