ponyspy,
и что тут
|
Сообщение от ponyspy
|
|
громоздкое решение
|
?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.round{background:#FFA500;width:0px;height:0px;padding:8px;border-radius:4px}
.image{width:100%;height:100%}
.hide{display:none}
</style>
<script>
$(function (){
$('#test').click(generatePoster);
function rund(e, f) {
function d(b) {
for (var a = b.length - 1; 0 < a; a--) {
var c = Math.floor(Math.random() * (a + 1)),
d = b[c];b[c] = b[a];b[a] = d }
return b}
var a = [],c = [];
for (i = 0; i < e; i++) a[i] = i + f;d(a);
return function () {
var b = a.shift();c.push(b);
1 == a.length && (d(c), a = a.concat(c), c = []);
return b
}
};
var hide_items = $('.hide').size();
var rand_items = rund(hide_items, 0);
var rand_radius = rund(400, 200);
function generatePoster () {
//var item = rand_items();
//var radius = rand_radius(); item и radius использовать если нужны одинаковые значения
var atr = $('.hide').eq(rand_items()).attr('src');
$('.image').attr('src', atr);
//$('.main_poster_cal').hide().eq(rand_items()).show();
$('.round').css("background-color", "#"+Math.ceil(Math.random()*16777214).toString(16))
.animate({
width: rand_radius(),
height: rand_radius()
}, {duration: 400, queue: false})
}
})
</script>
</head>
<body>
<input id="test" type="button" value="generate">
<div class="round">
<img class="image" src="" alt="">
</div>
<img class="hide" src="http://cache.foxsaver.com/thumbnails/2009/06/17/1410246630t.jpg" alt="">
<img class="hide" src="http://mindfulreiki.co.uk/wp-content/uploads/2012/12/flower-300x300.png" alt="">
<img class="hide" src="http://www.fragrantica.ru/images/avatariru/t.38016.jpg" alt="">
<img class="hide" src="http://www.birdz.sk/uc/av/e/c/ec9fecaceb74d24679b73295e80f10ca.jpg" alt="">
<img class="hide" src="http://cs304505.vk.me/v304505947/5fe0/uWP57ucJ5cM.jpg" alt="">
<img class="hide" src="http://s018.radikal.ru/i519/1202/62/8856baf46906.jpg" alt="">
</body>
</html>