Позиционирование элементов JQuery и многое другое

Привет, ребята, я обычно хорошо разбираюсь в редактировании, но на этот раз я решил попробовать что-то новое с JQuery. Я пытаюсь создать страницу «3D» карты (аналогично этому: http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&redirect_back=true&ref=45), но я не могу позиционировать элементы, и я думаю, что мои коды ошибочны.Позиционирование элементов JQuery и многое другое

Вот JS:

$(document).ready(function() { //perform actions when DOM is ready 
var z = 0; //for setting the initial z-index's 
    var inAnimation = false; //flag for testing if we are in a animation 
    var imgLoaded = 0; //for checking if all images are loaded 

$('.img').each(function() { 
    z++; 
    $(this).css('z-index', z); 
    imgLoaded++; 
}); 

function swapFirstLast(isFirst) { 
    if(inAnimation) return false; //if already swapping pictures just return 
    else inAnimation = true; //set the flag that we process a image 

    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image 
    if(isFirst) { 
     processZindex = z; newZindex = 1; inDeCrease = 1; 
    } else { 
     processZindex = 1; newZindex = z; inDeCrease = -1; 
    } //set variables for "next" and "previous" action 

    $('.img').each(function() { //process each image 
    if($(this).css('z-index') == processZindex) { //if its the image we need to process 
    $(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() { 
    $(this).css('z-index', newZindex) //set new z-index 
     .animate({top : '0' }, 'slow', function() { 
     inAnimation = false; //reset the flag 
     $(this).animate({ opacity: 1 }, 500); 
     }); 
    }); 
    } else { //not the image we need to process, only in/de-crease z-index 
    $(this).animate({top : '0' }, 'slow', function() { //make sure to wait swapping the z-index whe 
    $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one 
    }); 
    } 
    }); 
return false; //don't follow the clicked link 
} 

$('#next a').click(function() { 
    return swapFirstLast(true); //swap first image to last position 
}); 

$('#prev a').click(function() { 
    return swapFirstLast(false); //swap last image to first position 
}); 

});

А вот HTML:

<html> 
<head> 
<style type="text/css"> 
ul { list-style: none; 
margin: 200px;} 

#pictures { position: relative; height: 408px;} 

.img { 
position: absolute; 
top: 10; 
left: 0; 
padding: 10px; 
background: #eee; 
border: 1px solid #fff; 
-webkit-transform: translate(0px, 0px) skew(0deg, 5deg); 
} 
.desc { 
max-height: 30px; 
text-align: center; 
padding: 10px 10px 0 10px; 
} 
li { 
border: 5px solid #c4c8cc; 
-moz-box-shadow: 3px 3px 10px #888; 
-webkit-box-shadow: 3px 3px 10px #888; 
padding: 200px; 
} 
</style> 
</head> 
</html> 

<div id="gallery"> 

<ul id="pictures"> 
    <li class="img"> 
    <div class="desc">Hello World</div> 
    </li> 
    <li class="img"> 
    <div class="desc">Hello World</div> 
    </li> 
</ul> 
</div>

Извините за беспорядок, но я в спешке, чтобы получить это сделано - вся помощь очень ценится: D

источник

2010-12-01 Keiran Lovett

Пожалуйста, обратите внимание на почтовых руководящих принципов форматирования и посмотреть, если вы можете получить это очистить вверх чуть. Спасибо. – 2010-12-01 14:52:13

Я отформатировал его - вы имеете в виду сообщение на форуме или код? – 2010-12-01 14:57:56

@keiran, вы были очень близки. Я переместил ваш контент на jsbin. Не совсем точно, как вы хотите, чтобы последняя вещь выглядела. Это кажется функциональным.

http://jsbin.com/awule4/5/edit#preview

Надеется, что это помогает.

Боб

источник

2010-12-04 22:13:58 rcravens

Позиционирование элементов JQuery и многое другое

ответ

Смежные вопросы