#1 2011.02.16 11:39

TLENS
Moderator
Откуда: Украина
Зарегистрирован: 2009.04.05
Сообщений: 2402
Карма: 14
Профиль

Проблема с this

Код:

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>

Неактивен

#2 2011.02.16 12:15

Gemorroj
Administrator
Откуда: Белоруссия
Зарегистрирован: 2007.11.03
Сообщений: 6538
Карма: 108
Профиль Веб-сайт

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

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

Неактивен

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

forum.wapinet.ru

PunBB Mod v0.6.1
0.007 s