我创建了三个.png热气球图像.每个都是不同的大小,以便他们给出"深度"的想法.编码这些.png的最佳方法是什么,以便它们像热气球一样移动并漂浮在我的容器周围?
我已经尝试了Spritely网站上的以下代码,我将其改编为:
$('#balloon1')
.sprite({fps: 3, no_of_frames: 1})
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 10000,
pause: 3000
});
Run Code Online (Sandbox Code Playgroud)
我把这个代码放到另外两个气球(#balloon1)和(#balloon2)然后我把他们各自的DIV放到一个标有"#sky"的容器DIV中
我认为将速度设置为10000将使它们漂浮得更慢.
然而,它并没有像我希望的那样发挥作用.首先,一旦页面加载,所有三个气球(我最初位于容器的三个不同位置)立即漂浮到同一个位置,之后它们似乎没有从那个位置移动太多.
是否有一种更简单,更有效的方法让我的三个气球图像随机和逼真地在我的容器周围移动?
非常感谢你,如果你能提供一些帮助!
我想创建一些可以在固定div容器内随机移动的东西.我喜欢这个例子中的对象移动方式,我发现在这个网站上搜索...
jsfiddle上的代码包含以下内容:
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] …Run Code Online (Sandbox Code Playgroud) 我觉得这是执行Google / StackOverflow搜索的一项简单任务,但是我似乎找不到关于该主题的任何内容...无论如何,我要做的就是创建自己的Geocoder搜索栏,该栏可以在其他地方使用我的mapbox地图。
例如,进入Zillow主页。当您访问主页时,您尚未在地图上。您可以在提供的搜索栏中输入邮政编码,然后按Enter(或按钮),然后地图便会以您提供的邮政编码为中心。
我基本上是想做同样的事情。在我的主页上,我想要一个简单的邮政编码输入和一个单击按钮,以触发地图出现并居中于所提供的邮政编码上。
有人可以提供一些有关如何实现此目标的见解吗?非常感谢!
jquery ×2
containers ×1
geocoding ×1
html ×1
javascript ×1
leaflet ×1
mapbox ×1
random ×1
spritely ×1