WAP Мастер Форум

TLENS · 2011.02.16 08:39

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

var style_in = 'easeOutBounce';

var style_out = 'jswing';

var speed_in = 1000;

var speed_out = 250;

var width,height,heightPos,heightOut, widthPos,widthOut

$('.qitem').each(function () {

//var src = $img.attr('src');

//$img.attr('src', '');

//$img.attr('src', src);

console.log(++i+''+$img);

$('.qitem img').load(function()

{

width = Math.round($(this).width()/2)*(-1);

height = Math.round($(this).height()/2)*(-1);

heightPos = (height * (-1));

heightOut = heightPos * 2;

widthPos = (width * (-1));

widthOut = widthPos * 2;

$('.qitem').css('width',widthOut+'px');

$('.qitem').css('height',heightOut+'px');

img = $(this).attr('src');

console.log(img);

$('img', '.qitem').remove();

$('.qitem').append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');

$('.qitem').children('div').css('background-image','url('+ img + ')');

$('.qitem').find('div.topLeft').css({top:0, left:0, width:widthPos , height:heightPos});

$('.qitem').find('div.topRight').css({top:0, left:widthPos, width:widthPos , height:heightPos});

$('.qitem').find('div.bottomLeft').css({bottom:0, left:0, width:widthPos , height:heightPos});

$('.qitem').find('div.bottomRight').css({bottom:0, left:widthPos, width:widthPos , height:heightPos});

});

}).hover(function () {

$('.qitem').find('div.topLeft').stop(false, true).animate({top:width, left:width}, {duration:speed_out, easing:style_out});

$('.qitem').find('div.topRight').stop(false, true).animate({top:width, left:widthOut}, {duration:speed_out, easing:style_out});

$('.qitem').find('div.bottomLeft').stop(false, true).animate({bottom:height, left:width}, {duration:speed_out, easing:style_out});

$('.qitem').find('div.bottomRight').stop(false, true).animate({bottom:height, left:widthOut}, {duration:speed_out, easing:style_out});

},

function () {

$('.qitem').find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});

$('.qitem').find('div.topRight').stop(false, true).animate({top:0, left:widthPos}, {duration:speed_in, easing:style_in});

$('.qitem').find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});

$('.qitem').find('div.bottomRight').stop(false, true).animate({bottom:0, left:widthPos}, {duration:speed_in, easing:style_in});

});

Вот пример тут проблема в том что сразу обрабатываются все картинки потом ждут когда загрузятся и начинают по новой обрабатываться.
И таким образом идут збои в переменных. $('.qitem') писал и в переменную. Ну нету идей как его сделать ну а также путаются переменные width и height ну и им пивязанные.
Как это все реализовать чтобы размеры не путались.
Пример использования
<div class="qitem"><img src="/avatar/1.gif" /> Т.д. т.п.</div>

<div class="qitem"><img src="/avatar/2.gif" /> Т.д. т.п.</div>

<div class="qitem"><img src="/avatar/3.gif" /> Т.д. т.п.</div>

<div class="qitem"><img src="/avatar/4.gif" /> Т.д. т.п.</div>

Gemorroj · 2011.02.16 09:15

each(function () {
function может принимать 2 параметра. 1 из них - это счетчик..

WAP Мастер Форум

#1 2011.02.16 08:39

Проблема с this

Код:

#2 2011.02.16 09:15

Re: Проблема с this

Дополнительно