слайдер падающие блоки
Цитата:
Сообщение от laimas
на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
position: relative;
width: 500px;
height: 300px;
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
}
#slider div{
margin: 0;
padding: 0;
position: absolute;
background-color: #0000FF;
background-repeat: no-repeat;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script>
$(function() {
var slider = $("#slider");
var height = slider.height();
var width = slider.width();
function load_img(next, src, x, y) {
var w = width / x | 0;
var h = height / y | 0;
slider.height(height = h * y);
slider.width(width = w * x);
slider.css({
backgroundSize: width + "px " + height + "px",
backgroundImage: "url(" + next + ")"
});
var n = 0,
arr = Array(x * y);
$.each(arr, function(i, el) {
!n && y--;
arr[i] = $("<div>", {
css: {
left: n * w,
top: y * h,
width: w,
height: h,
backgroundImage: "url(" + src + ")",
backgroundPosition: -n * w + "px " + -y * h + "px",
backgroundSize: width + "px " +
height + "px"
}
}).prependTo(slider);
n = ++n % x
});
return arr
}
function show(arr) {
$.when.apply(null, arr.map(function(el) {
var time = Math.floor(Math.random() * 1000+800);
return el.css({
"z-index": 100
}).delay(time).animate({
top: height
}, {
easing: "easeOutCirc",
duration: 1200})
})
).done(function() {
arr.forEach( function(el) {
el.remove()
});
setTimeout(go, 1000);
});
}
var arrSrc = ["http://wallpapershome.ru/images/pages/pic_h/7086.jpg", "http://wallpapershome.ru/images/pages/pic_h/8983.jpg", "http://www.kinomania.ru/images/wallpapers_film/w1920x1080_15585.jpg"];
function preload(arr,foo)
{ var count = 0;
function l() {
if(++count == arr.length) foo();
}
return arr.map(function(src) {
var img = new Image();
img.onload = l;
img.src = src;
return img
})
}
function go() {
var arr = load_img(arrSrc[1].src, arrSrc[0].src, 25, 15);
show(arr);
arrSrc.push(arrSrc.shift());
}
arrSrc = preload(arrSrc,go);
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
|
