Question

我有这段代码：

JS：

<script src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("img").css({
        "filter": "url(#example-one)", 
        "-webkit-filter": "blur(4px)", 
        "-moz-filter": "blur(4px)",
        "-o-filter": "blur(4px)",
        "-ms-filter": "blur(4px)"

    });
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-two)", 
            "-webkit-filter": "blur(3px)", 
            "-moz-filter": "blur(3px)",
            "-o-filter": "blur(3px)",
            "-ms-filter": "blur(3px)"

        });
    }, 3000);
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-three)", 
            "-webkit-filter": "blur(2px)", 
            "-moz-filter": "blur(2px)",
            "-o-filter": "blur(2px)",
            "-ms-filter": "blur(2px)"

        });
    }, 3100);
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-four)", 
            "-webkit-filter": "blur(1.5px)", 
            "-moz-filter": "blur(1.5px)",
            "-o-filter": "blur(1.5px)",
            "-ms-filter": "blur(1.5px)"

        });
    }, 3200);
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-five)", 
            "-webkit-filter": "blur(1px)", 
            "-moz-filter": "blur(1px)",
            "-o-filter": "blur(1px)",
            "-ms-filter": "blur(1px)"


        });
    }, 3300);
    window.setTimeout(function() {
        $("img").css({
            "filter": "", 
            "-webkit-filter": "", 
            "-moz-filter": "",
            "-o-filter": "",
            "-ms-filter": ""

        });
    }, 3400);
    $("#promoIMG").fadeIn(5000);
});

HTML：

<div id="page">

    <div id="promoIMG">
        <a href="main.php"><img src="images/akb1.png" alt="" onMouseOver="this.src='images/akb2a.png'" onMouseOut="this.src='images/akb1.png'"/></a><br/>
        <img src="images/akb2.png" alt="AKB" />

    </div>

    <svg height="0" xmlns="http://www.w3.org/2000/svg">

        <!-- Filter ID/Name -->
        <filter id="example-one">

            <!-- Amount of Gaussian Blur that should be applied -->
            <feGaussianBlur stdDeviation="4"/>

        </filter>
        <filter id="example-two">
            <feGaussianBlur stdDeviation="3"/>
         </filter>
         <filter id="example-three">
            <feGaussianBlur stdDeviation="2"/>
         </filter>
         <filter id="example-four">
            <feGaussianBlur stdDeviation="1.5"/>
         </filter>
         <filter id="example-five">
            <feGaussianBlur stdDeviation="1"/>
         </filter>
    </svg>
    </div>

Tt在chrome和mozilla firefox中完美运行，但是当我尝试在safari，opera和IE上运行它时，图像模糊动画无效。

我的代码中有什么问题吗？还是缺少野生动物园，歌剧和IE的东西？

任何帮助将不胜感激，谢谢......

Answer 1

您可以使用svg的<image>元素（基本上在svg中移动图像），这应该适用于大多数浏览器（请参阅caniuse获取支持图表）。

图像模糊crossbrowser不适用于safari，opera和＆amp;即

1 个答案: