如何让一个div随机走动页(使用jQuery或CSS) [英] how to get a div to randomly move around a page (using jQuery or CSS)

查看:829
本文介绍了如何让一个div随机走动页(使用jQuery或CSS)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经做了一些谷歌搜索找到一个答案,但我没有运气。这可能是因为我是一个有点业余的,我不知道正确的术语搜索,但也许这里有人能引导我在正确的方向,或帮助我。

I've been doing some Googling to find an answer to this, but I've had no luck. It could be because I'm a bit of an amateur and I don't know the proper terms to search for, but maybe someone here can steer me in the right direction or help me out.

不管怎样,我正在寻找一种方式来获得一个div随机,顺利地在页面上移动。将会有一个背景颜色,那么这个形象,我想貌似随机的,无限的网页左右移动。就像一个DVD播放机的主屏幕的背景,其中DVD只是左右浮动。

Anyway, I'm looking for a way to get a div to randomly, smoothly move around a page. There will be a background color, then this image which I want to seemingly randomly, infinitely move around the page. Much like the background of a DVD player's home screen where "DVD" is just floating around.

在div的起点并不重要,也没有终点。它只是需要随意四处移动页面,在这段时间里,用户就是页面上。

Starting point of the div doesn't matter, nor does the ending point. It just needs to randomly move around the page for the duration a user is on that page.

我有体面的HTML和CSS技巧,非常基本的JS技能,以及一些经验实施的jQuery。理想情况下,我想一些东西,我可以实现我自己。

I've got decent HTML and CSS skills, very basic JS skills, and some experience implementing jQuery. Ideally, I'd like something which I can implement myself.

在此先感谢!

推荐答案

基本的premise是生成位置值,并使用jQuery的动画()函数来移动DIV。下一个位置的计算很简单,你只需要一点数学。这里是一个非常基本的jsfiddle我只是敲了起来。它可以根据多远它有太多移动e.c.t.,可能具有延时定时器做的,动态的计算速度但它给你一个起点,我希望。

The basic premise is to generate positional values, and use jquery's animate() function to move the div. The calculation of the next position is simple, you just need a bit of math. Here's a very basic jsfiddle i just knocked up. It could do with possibly a delay timer, a dynamically calculating speed based on how far its got too move e.c.t. But it gives you a start point i hope.

http://jsfiddle.net/Xw29r/

更新例如code。与速度修正:

Updated example code with speed modifier:

http://jsfiddle.net/Xw29r/15/

这篇关于如何让一个div随机走动页(使用jQuery或CSS)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆