0

私はこのコードを持っています：

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はクロームとモジラのFirefoxで完全に動作しますが、サファリ、オペラ、IEで実行しようとすると、画像のぼかしアニメーションが機能しませんでした。

私のコードに何か問題がありますか？またはサファリ、オペラ、IEに欠けているものはありますか？

どんな助けでもありがたいです、Thx ...

4

1 に答える 1

0

代わりにsvgの<image>要素を使用することもできます（基本的にはsvg内で画像を移動します）。これは、ほとんどのブラウザーで機能するはずです（サポートチャートについてはcaniuseを参照してください）。

于 2013-02-15T10:22:21.237 に答える