javascript - 单击链接时如何使图像沿div顶部移动位置

Question

我对这一切都很陌生，我正试图获得像这个网站一样的图像移动效果：http ://www.heroku.com/ 。单击导航链接时，如何使图像沿 div 移动？

Answer 1

您是否指的是主页上的折纸舞台图像，箭头突出显示在单击起重机时会随之移动？在这个页面上，他们正在使用 jQuery animate 方法，您可以在 home.js 文件中看到整个代码。

如果你想尝试做类似的事情，我会去做类似的事情，比如（使用 jQuery）：

$(function () {
    var slider = $('#slider'),
        first = $('.list-item').first(),
        margin = (first.outerWidth() - first.innerWidth()) / 2,
        // compute the offset for the slider
        // you will have to tailor those to your specific implementation
        offset = (slider.outerWidth() / 2) +
                 ((first.outerWidth() - slider.outerWidth()) / 2);
    // attach click event to the menu elements
    $('.list-item').on('click', function () {
        var self = $(this),
            siblings = self.siblings(),
            x;
        // if not active, move the slider accordingly
        if (!self.hasClass('active')) {
            siblings.removeClass('active');
            self.addClass('active');
            x = offset + margin + self.position().left;
            // the magic happens here :)
            slider.animate({
                left: x
            }, 500);
        }
    });
    // trigger the click event for the first list element
    first.trigger('click');
});

当然，之前你必须正确准备 HTML 元素，添加一些样式，并使用边距、外/内宽度等。

你可以在这里找到我的 5 分钟教程/示例：http: //jsfiddle.net/krwck/bjVdN/10/

Answer 2

可能最好的选择是 JQuery。你可以定义

<a class='menu'>Option 1</a>
<a class='menu'>Option 2</a>
<a class='menu'>Option 3</a>

<div id='moveable'></div>

比你像这样使用 JQuery ：

$(".menu").click(function(){
   $("#moveable").animate({

   right: '+=150',

   }, 500, function() {
   // Animation complete.
 });
});

你也需要一些 CSS 样式。希望这个对你有帮助。

此链接也可能有所帮助：http ://api.jquery.com/animate/