每次加载页面时更改元素的位置
每次加载页面时更改元素的位置
提问于 2012-09-16 09:38:49
我有一个HTML页面，上面有5个图片(48 it×48 it)。我想在网页上的每一次加载时，在任意位置显示这些图像。
我不知道如何实现这一点，我只知道我需要CSS和JavaScript (用于随机化)。有什么想法或建议吗？
下面是示例HTML代码：
<a href="http://twitter.com/"><img alt="Twitter" src="/images/twitter-48.png" /></a>
<a href="http://facebook.com/><img alt="Facebook" src="/images/facebook-48.png" /></a>
<a href="https://plus.google.com/"><img alt="Google Plus" src="/images/plus-48.png" /></a>
<a href="https://github.com/"><img alt="GitHub" src="/images/github-48.png" /></a>回答 5
Stack Overflow用户
回答已采纳
发布于 2012-09-16 09:59:21
假设您已经将图像硬编码到html文档中。您需要做的就是向每个元素添加一个style属性(如果您想要用PHP实现这一点)。在您的例子中，您的图像保存在<a>标记中，所以您需要随机地定位<a>标记，而不是图像.
function generateRandomPositions(){
// define maximum and minimum 'top' values
$maxTop = 1000;
$minTop = 0;
// define maximum and minimum 'left' values
$maxLeft = 1000;
$minLeft = 0;
$styleProperties = array(
'position:absolute',
'top:'.rand($minTop,$maxTop) . 'px',
'left:'.rand($minLeft,$maxLeft) . 'px'
);
return ' style="'.implode(';',$styleProperties).'" ';
}函数将返回一个类似于-
style="position:absolute;top:10px; left:45px;"现在你要做的就是为页面上的每一张图片调用这个函数-
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...您的<a>标记现在将包含随机的CSS定位参数，它们的图像将与它们一起移动。
我相信您可以看到，这种使用PHP生成内联CSS属性的方法是一种反向的方法。JavaScript可能是获得您正在寻找的内容的最佳方法，还有其他的解决方法可以解决这个问题。您最初可以使用CSS隐藏元素，然后在设置随机定位后用JavaScript显示它们。
参考资料-
rand()implode()
Stack Overflow用户
发布于 2012-09-16 09:44:50
下面是一个相当简单的实现：http://jsfiddle.net/Eu8wT/
$('div.randomizeme').css({
top: Math.random() * 100+'%',
left: Math.random() * 100+'%'
});要将其应用于以下几个元素：
$('div.randomizeme').each(function(){
$(this).css({
top: Math.random() * 100+'%',
left: Math.random() * 100+'%'
});
});在没有jQuery的情况下，同样的事情是：
var elements = document.querySelectorAll('.randomizeme');
for (var i in elements) {
elements[i].style.top = Math.random() * 100 + '%';
elements[i].style.left = Math.random() * 100 + '%';
}Stack Overflow用户
发布于 2012-09-16 10:34:41
使用纯JavaScript (无库)的解决方案
var imgs = document.querySelectorAll('.rand'),
len = imgs.length,
/* subtract the width/ height of images */
w = document.body.clientWidth - 48,
h = document.body.clientHeight - 48;
for(var i = 0; i < len; i++) {
imgs[i].style.top = Math.floor(Math.random() * h) + 'px';
imgs[i].style.left = Math.floor(Math.random() * w) + 'px';
}working demo
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12445851
复制相关文章
相似问题
腾讯云开发者
