代码改变世界

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

  沐海  阅读(639)  评论(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 为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤：
  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; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); }
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
记录生活、工作、学习点滴！
E-Mail：mahaisong@hotmail.com 欢迎大家讨论。
沐海博客园，我有一颗，卓越的心！
点击右上角即可分享
微信分享提示
AI IDE Trae