0

我的页面上有图像，我正在使用 java 脚本更改其图像源。我所需要的只是用一些漂亮的滑动效果来改变这个图像。我想要的是当我单击一个按钮来更改图像时，第一个图像应该消失，另一个应该以某种体面的方式显示（不像混蛋或眨眼）

4

4 回答 4

1

您可以将第二张图片放在第一张图片后面，然后对第一张图片进行淡出（）效果。

于 2013-05-09T08:31:55.040 回答
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 回答
0

试试这个代码

 $(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
        var $next = $(this).attr('src','http://abc.com/logo.png');

    });

希望它会帮助你。

享受

于 2013-05-09T09:47:43.640 回答
0

使用此代码

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

你也可以给出时间间隔。

否则试试

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

于 2013-05-09T08:28:37.037 回答