[英]How to get an image to slide from one side of page to the other with jquery or javascript? Just like on thepiratebay.se
This is something i've been seeing alot in slides or on page when scrolling. 这是我在滚动时在幻灯片或页面上看到的很多东西。 Moving images. 运动图像。 How can I do this with jquery or some simple javascript just like on thepiratebay.se? 我该如何使用jquery或一些简单的javascript,就像在thepiratebay.se上一样? My idea was a car sliding from one side of the page to the other. 我的想法是让汽车从页面的一侧滑到另一侧。
I know jquery can do this with animate() but I dont see any examples of something sliding across the page like on thepiratebay.se 我知道jquery可以使用animate()做到这一点,但是我看不到任何东西在页面上滑动的示例,例如在thepiratebay.se上
Can anyone pintoint where they use this technique. 任何人都可以在使用此技术的地方使用pintoint。 I'm not sure what js they are using for this cant find it. 我不确定他们为此使用了什么js找不到它。
Src: http://thepiratebay.se Src: http : //thepiratebay.se
JavaScript? JavaScript的? This can be done by CSS! 这可以通过CSS完成!
Here have a smooth moving kitty. 这里有一只平稳的小猫。
html HTML
<img id="pic" src="tomato"/>
css 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%;}
}
Here is a quick example. 这是一个简单的例子。
CSS: CSS:
#b {
position: absolute;
top:50px;
}
HTML HTML
<img id="b" src="example.jpg"/>
Jquery jQuery的
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
this will move it left to right constantly. 这将使它不断地从左到右移动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.