Вы не зашли.
Главная » JavaScript » Проблема с this
#1. TLENS Off (14)
Moderator
2011.02.16 11:11
Код:
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. Gemorroj Off (107)
Administrator
2011.02.16 12:12
each(function () {
function может принимать 2 параметра. 1 из них - это счетчик..
Страниц: 1
Главная
WEB
PunBB Mod v0.6.2
0.015 s