这是我的“抛出”效果版本:
HTML:
<ul id="x">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
Javascript:
var list = document.getElementById('x');
var elements = list.getElementsByTagName('li');
for (var i=0; i<elements.length; i++) {
// random positon between 0px and 300px
elements[i].style.left = Math.ceil(Math.random()*300) + 'px';
elements[i].style.top = Math.ceil(Math.random()*300)+ 'px';
// random angle between -90 and 90 degrees
var rot = 'rotate(' + (Math.ceil(Math.random()*180) - 90) + 'deg)';
elements[i].innerHTML = rot;
// Firefox rotation
elements[i].style.MozTransform = rot;
// Safari/Chrome rotation
elements[i].style.WebkitTransform = rot;
// Opera Rotation
elements[i].style.OTransform = rot;
// all the rest
elements[i].style.roration = Math.ceil(Math.random()*180) - 90;
}
jsFiddle 演示