jQuery点击小图片显示大图片

来源：互联网发布：知乎每日精选 rss源编辑：程序博客网时间：2024/04/28 08:30

$imgs.eq(2).css("marginTop", "63px").animate({ marginTop: "0px" }, { duration: seconds });
$imgs.eq(0).css({ position: "absolute", opacity: "0.5" }).animate({ width: "108px", height: "57px", left: "372px", top: "126px", opacity: "1" }, { duration: seconds });

                $imgs.eq(1).css({ position: "absolute", left: "372px", top: "6px", opacity: "0.2", clear: "none" }).animate({ width: "360px", height: "190px", left: "-9px", top: "-5px", opacity: "1" }, { duration: seconds, complete: function () {
                    $imgs.eq(0).appendTo($("#warp"));
                    $imgs.eq(0).removeAttr("style").removeClass("imgBig").addClass("imgLittle");
                    $imgs.eq(1).removeAttr("style").removeClass("imgLittle").addClass("imgBig");
                    $warp.IsRunning = false;
                }
                });
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="warp" id="warp">
        <img src="images/look1.jpg" alt="" class="imgBig" />
        <img src="images/look2.jpg" alt="" class="imgLittle" />
        <img src="images/look3.jpg" alt="" class="imgLittle" />
        <img src="images/look4.jpg" alt="" class="imgLittle" />
    </div>
    </form>
</body>