jquery - 如何使图像从屏幕之外出现？

Question

我有一张图片，它实际上是带有 facebook“like”按钮的图片 :)。

当我将页面向下滚动到底部时，我希望它从屏幕右侧滑出。怎么做？

也许jQuery？但是怎么做？

Answer 1

给图像一个left大于窗口宽度的 css 位置。比使用例如 jQuery.animate 来移动它。

HTML：

<img src="http://www.vpul.upenn.edu/platthouse/files/FB_button_1.jpg">

CSS：

img {
  position: absolute;
  left: 1000px;
}
body{
  overflow: hidden;
}

JS：

setTimeout(function(){$('img').animate({left: 10}, 500)}, 1000);

例子：

jsfiddle

Answer 2

我认为这个jsfiddle 可以满足您的要求。

当用户向下滚动 100 像素并且（通常被遗忘）时，当用户向上滚动时，该按钮会被 jQuery 动画化。

$(document).ready(function () {
    var like = $('#fblike');

    $(window).scroll(function () {
        if ($(document).scrollTop() > 100) {
            like.animate({
                opacity: 1,
                right: 5
            }, 300);
        }
        else {
                like.animate({
                opacity: 0,
                right: -60
                }, 200);
        }        
    });
});​