如何使用jquery或javascript將圖像從頁面的一側滑動到另一側？ 就像在thepiratebay.se上一樣

Question

這是我在滾動時在幻燈片或頁面上看到的很多東西。 運動圖像。 我該如何使用jquery或一些簡單的javascript，就像在thepiratebay.se上一樣？ 我的想法是讓汽車從頁面的一側滑到另一側。

我知道jquery可以使用animate（）做到這一點，但是我看不到任何東西在頁面上滑動的示例，例如在thepiratebay.se上

任何人都可以在使用此技術的地方使用pintoint。 我不確定他們為此使用了什么js找不到它。

Src： http ： //thepiratebay.se

Answer 1

JavaScript的？ 這可以通過CSS完成！

這里有一只平穩的小貓。

演示

HTML

<img id="pic" src="tomato"/>

CSS

#pic {
  -webkit-animation: myfirst 2s;
  animation: myfirst 2s;
  position: absolute;
  right: 80%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
  from {right: 10%;}
  to {right: 80%;}
}

@keyframes myfirst {
  from {right: 10%;}
  to {right: 80%;}
}

Answer 2

這是一個簡單的例子。

CSS：

#b {
position: absolute;
top:50px;
}

HTML

<img id="b" src="example.jpg"/>

jQuery的

function moveRight(){
    $("#b").animate({left: "+=300"}, 2000,moveLeft)
}

function moveLeft(){
    $("#b").animate({left: "-=300"}, 2000,moveRight)
}

$(document).ready(function() {

   moveRight();

});

這將使它不斷地從左到右移動。