0

ページに画像があり、その画像ソースを Java スクリプトで変更しています。必要なのは、この画像を美しいスライド効果で変更することだけです。私が欲しいのは、ボタンをクリックして画像を変更すると、最初の画像が消え、別の画像が何らかの適切な方法で表示されることです(ジャークやまばたきのようではありません)

4

4 に答える 4

1

最初の画像の後ろに 2 番目の画像を置いてから、最初の画像に fadeout() を適用することができます。

于 2013-05-09T08:31:55.040 に答える
0

このコードを使用してください

$(".firstimage_classname").fadeout(); $(".secondimage_classname").fadeIn();

時間間隔を指定することもできます。

それ以外の場合は試してください

$(".firstimage_classname").slideUp(); $(".secondimage_classname").fadeIn();

于 2013-05-09T08:28:37.037 に答える
0

コード例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <style type="text/css">
            .front{
                width: 300px;
                height: 300px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 10;
            }

            .back{
                width: 300px;
                height: 300px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 1;
            }
        </style>
        <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
    </head>
    <body>
        <div id="content">
            <img src="1.jpg" class="front" />
        </div>

        <script type="text/javascript">
            $(function(){
                $('.front').click(function(){
                    $('#content').append('<img src="2.jpg" class="back" />');
                    $(this).fadeOut(500, function(){
                        $('.front').remove();
                        $('.back').addClass('front').removeClass('back');
                    });
                });
            });
        </script>
    </body>
</html>
于 2013-05-09T10:58:25.730 に答える