如何让图像出现在屏幕之外？

问题描述：

我有一个图像，它实际上是与Facebook“喜欢”按钮的图像:)。如何让图像出现在屏幕之外？

我希望它能从屏幕右侧滑过，即我将页面滚动到底部。怎么做？

也许jquery？但是如何？

like [this]（http://performyourmind.com/）？ – JakeParis

你尝试过什么吗？ – JakeParis

是的，像这样，但从右侧和自动 - 不胡佛：） – pawel

答

给图像一个css left比你的窗口宽度大的位置。不是使用例如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

好吧，但如何设置这种动画的方式，它只有当我向下滚动动画？ – pawel

这将作为练习留给你。我建议阅读事件和jQuey事件绑定。 ;-) – snies

换句话说，@snies不知道。 :) – JakeParis

答

我认为this jsfiddle做你想要的。

当用户向下滚动100像素AND（常被遗忘）时，用户滚动备份时该按钮被再次隐藏，类似按钮由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); 
     }   
    }); 
});

如何让图像出现在屏幕之外？

相关推荐