Показать сообщение отдельно
  #1 (permalink)  
Старый 05.10.2013, 01:40
Аспирант
Отправить личное сообщение для Фридрих Посмотреть профиль Найти все сообщения от Фридрих
 
Регистрация: 10.09.2013
Сообщений: 59

мой plugin - дайте пожалуйста оценку и совет!
вот как то получилась анимация у меня и не знаю, на сколько грамотно!?
можно ли так вообще писать скрипты!? Дело в том, что просмотрев несколько "каруселей", заметил что все фото двигаются одновременно в ту или другую сторону. Вопрос, будет ли зависание, если одновременно анимириуются очень много фоток? в моем случае такое происходит только раз при первом клике на любую из кнопок!
<!DOCTYPE html>
<html>
<head>
<title>animation</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
.master{ 
width: 604px; 
height: 520px;  
position: relative;
margin:0 auto;
}
.view{ 
width: 604px;
height: 453px;  
position: absolute;
left: 0px;
bottom: 0px;
overflow: hidden;
}
.box{ 
width: 604px; 
height: 453px;  
position: absolute;
left: 0px;
bottom: 0px;
z-index: 5;
}
.button{
width: 100px;
height: 40px;
position: relative;
top: 0px;
cursor: pointer;
border: 1px solid #fff;
margin:5px;
float: left;
}
</style>
<script>
$(function(){
var buttons = $('.button'), boxs = $('.box');
buttons.click(function(){
var i = buttons.index(this),
box = boxs.eq(-i-1); 
boxs.stop(true,true);
box.css({left: '0px', bottom:'0px', zIndex:'5'});
boxs.not(box).animate({left:'-604px', bottom:'-453px', zIndex:'10'},400,
function () {box.css({zIndex:'10'});});});});
</script> 
</head>
<body>
<div class='master'> <!-- контейнер -->
	
	<div class='button'></div>
	<div class='button'></div>
	<div class='button'></div>
	<div class='button'></div>
	
<div class='view'> <!-- видимая область -->	
	
	<div class='box'><img src='http://cs402816.vk.me/v402816252/6f2c/ryOocbZG7JI.jpg'></div>
	<div class='box'><img src='http://cs402816.vk.me/v402816252/6f34/JGtb3OF5-sI.jpg'></div>
	<div class='box'><img src='http://cs402816.vk.me/v402816252/6f3c/vWL9c6z5rsg.jpg'></div>
	<div class='box'><img src='http://cs402816.vk.me/v402816252/6f44/1XekGnMkBb4.jpg'></div>
	
</div>
</div>	
</body>
</html>

Последний раз редактировалось Фридрих, 05.10.2013 в 14:30. Причина: run
Ответить с цитированием