Почему крашится анимация
собственно сабж
function load_img(count){
var height = $("#slider").height();
var width = $("#slider").width();
$(".slide").each(function(index, el) {
if (index<10){
var left = - 1 * (index * (width / count));
$(this).css({
backgroundSize: width, height,
backgroundImage: "url(pics/slider/pic.jpg)",
backgroundPosition: left
});
}
if (index>9 && index<20){
var left = - 1 * (index * (width / count));
$(this).css({
backgroundSize: width, height,
backgroundImage: "url(pics/slider/pic2.jpg)",
backgroundPosition: left
});
}
});
}
function slider_wrapper(slides_count, slide_elements){
var wrapper_height = $("#slider").height() * (slides_count + 1);
var wrapper_width = $("#slider").width();
var slide_now = 0;
var slide_element_width = $("#slider").width() / slide_elements;
var top = 0;
var counter = 0;
$("#slider").append("<div id='slider_wrapper'>");
$("#slider_wrapper").css({
height: wrapper_height,
width: wrapper_width,
top: "0",
left: "0",
margin: "0",
padding: "0",
position: "absolute"
});
for (var i=0; i <= slides_count; i++){
for (var j=0; j<slide_elements; j++)
$("#slider_wrapper").append("<div class='slide'>");
}
$(".slide").each(function(index, el) {
left = counter * slide_element_width;
counter++;
slides[index] = el;
//if (index < slides_count * slide_elements){
$(el).css({
backgroundColor: random_color(),
width: slide_element_width,
height: $("#slider").height(),
margin: "0",
padding: "0",
listStyle: "none",
position: "absolute",
left: left,
top: top
});
if ((index + 1) % slide_elements == 0){
top += $("#slider").height();
counter = 0;
}
//}
});
load_img(slide_elements);
$("#slider").scrollTop($("#slider").height() * (slides_count - 1));
slider_animation(slides_count, slide_elements);
}
function slider_animation(slides_count, slide_elements){
setInterval(function(){
$(".slide").each(function(index, el) {
var top = Math.round($(el).position().top) + Math.round($("#slider").height());
$(el).animate({
top: top
}, 500, function(){
if (top > slides_count * Math.round($("#slider").height()))
$(el).css({
top: "0"
});
//load_img(10);
});
});
}, 1000);
}
при сворачивании/розворачивании, открытии вкладки происходит (судя по всему) неправильный пересчет координат и анимация работает не правильно...с чем это связано и как бороться? |
kex15i10,
setInterval лучше никогда не использовать нигде и лучше полный макет и пояснение что код делает. |
а что вместо setInterval делать? для задания анимации?
алгоритм: мне необходимо разбить изображение на несколько частей, что бы они по очереди "падали" в низ. функция slider_wrapper(slides_count, slide_elements) - создаем обвертку для слайдера и заполняем ее подслайдами (именно части изображения). slides_count - количество слайдов(картинок), slide_elements - на сколько частей бьется изображение. load_img(count) - загружает картинки в блоки (подслайды) slider_animation(slides_count, slide_elements) - функция для анимации |
kex15i10,
setTimeout или callback в animate |
callback - в смысле рекурсию использовать?
|
kex15i10,
на всякий случай backgroundSize: width+"px "+height + "px", |
ну проблемка в том что сбивается анимация...на сколько понимаю из -за того что таймер сбивается....
быть может стоит воспользоваться другим языком программирования?не подскажите чтони-будь для создания визуальных эффектов?альтернативу js |
слайдер падающие блоки
kex15i10,
вариант на скорую руку ... :write: без прелоадера картинок
<!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) {
if (!arr.length) setTimeout(go, 3E3);
var i = Math.floor(Math.random() * arr.length);
i = arr.splice(i, 1)[0];
i.css({
"z-index": 100
}).animate({
top: height
}, {
easing: "easeOutCirc",
duration: 1200,
complete: function() {
i.remove();
show(arr)
}
})
}
var arrSrc = ["http://www.kudatotam.ru/upload/1/3099_3_s.jpg", "http://333v.ru/uploads/fb/fb4a0febf5211a49f33cd0a5edefcea0.jpg", "http://wallbattle.ru/ph/41/zelen_dereva_ls_1920x1080.jpg"];
function go() {
arrSrc.push(arrSrc.shift());
var arr = load_img(arrSrc[1], arrSrc[0], 4, 3);
show(arr)
}
go()
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
|
слайдер блоками с opacity
:write:
<!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() {
function n(e, p, c, b) {
var a = g / c | 0,
k = h / b | 0;
d.height(h = k * b);
d.width(g = a * c);
d.css({
backgroundSize: g + "px " + h + "px",
backgroundImage: "url(" + e + ")"
});
var f = 0,
l = Array(c * b);
$.each(l, function(e, m) {
!f && b--;
l[e] = $("<div>", {
css: {
left: f * a,
top: b * k,
width: a,
height: k,
backgroundImage: "url(" + p + ")",
backgroundPosition: -f * a + "px " + -b * k + "px",
backgroundSize: g + "px " + h + "px"
}
}).prependTo(d);
f = ++f % c
});
return l
}
function q(a, n) {
(r ^= 1) && a.reverse();
$.when.apply(null, a.map(function(k, c) {
var b = (n/a.length) * c;
return k.css({
"z-index": 100
}).delay(b).animate({
opacity: 0
}, {
easing: "easeOutCirc",
duration: 300
})
})).done(function() {
a.forEach(function(a) {
a.remove()
});
setTimeout(m, 1E3)
})
}
var op = [1,100];
function m() {
Math.random() < .2 && op.reverse();
var e = n(a[1].src, a[0].src, op[0], op[1]);
q(e,1200);
a.push(a.shift())
}
var d = $("#slider"),
h = d.height(),
g = d.width(),
r = 0,
a = ["http://kamozin.com/storage/album/1/n/7/b10606515b84ab728fddc89.jpg", "http://www.fonstola.ru/download.php?file=201308/1024x600/fonstola.ru-103371.jpg", "http://japonskie.ru/puzzle/source/gori_na_zakate.jpg"],
a = function(a, d) {
function c() {
b.push(this);
2 == b.length && d()
}
var b = [];
a.forEach(function(a) {
var b = new Image;
b.onload = c;
b.src = a
});
return b
}(a, m)
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
|
хмм спасибо))сяду разберусь
|
| Часовой пояс GMT +3, время: 06:56. |