Question

我有一个简单的html表，其中5个图像从左到右依次相邻。

我需要这样做：

1）在图像的鼠标悬停时，它被另一个用不同颜色的图像替换（好吧，我认为这很简单，我会自己尝试）

2）单击图像时，它向左移动。例如，如果我从左侧开始单击第四个图像，则此图像将移动到第一个位置，而左侧的图像（图像1,2,3）将向右移动一个位置。

这种效果会更好看到和平滑。你认为可以使用javascript或者我必须使用Flash吗？

谢谢

Answer 1

是的，可以使用JavaScript。这是一个非常基本的例子，可以帮助您入门。

<div id="images">
    <img src="http://placekitten.com/110/110" data-replacement-image="http://baconmockup.com/110/110" />
    <img src="http://placekitten.com/120/120" data-replacement-image="http://baconmockup.com/120/120" />
    <img src="http://placekitten.com/130/130" data-replacement-image="http://baconmockup.com/130/130" />
    <img src="http://placekitten.com/140/140" data-replacement-image="http://baconmockup.com/140/140" />
    <img src="http://placekitten.com/150/150" data-replacement-image="http://baconmockup.com/150/150" />
</div>

jQuery的：

$(function () {
    $("#images").on("mouseover", "img", function () {
        $(this).data("original-image", $(this).attr("src"));
        $(this).attr("src", $(this).data("replacement-image"));
    });
    $("#images").on("mouseout", "img", function () {
        $(this).attr("src", $(this).data("original-image"));
    });
    $("#images").on("click", "img", function () {
        $("#images").prepend($(this));
        $(this).mouseout();
    });
})

http://jsfiddle.net/Wd5Fz/1/

用javascript移动一系列图像

1 个答案: