Javascript.RU

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

Анимированный tab или галерея картинок
день добрый!
не судите строго, я всего 4 недели изучаю HTML, CSS и javascript.
подскажите плз, как оптимизировать мой скрипт?? в моем случае всё работает как я и хотел, но не знаю как избавиться от повторения сценария.....вот коды
Код:
<!DOCTYPE html>
<html>
	<head>
		<title>portfolio</title>
		<script type='text/javascript' src='js/jquery.js'></script>
		<script type='text/javascript' src='js/script.js'></script>
		<link rel='stylesheet' href='css/style.css' type='text/css'>
	</head>
<body>
<div class='master'> <!-- контейнер -->
	
	<div class='button' id='but1'></div>
	<div class='button' id='but2'></div>
	<div class='button' id='but3'></div>
	
<div class='view'> <!-- видимая область -->	
	
	<div class='box' id='box1'><img src='img/1.png'></div>
	<div class='box' id='box2'><img src='img/2.png'></div>
	<div class='box' id='box3'><img src='img/3.png'></div>
	
</div>
</div>	
	</body>
</html>
Код:
* {
	margin: 0;
	padding: 0;
}
body {
background: #000;
}
.master{ 
width: 800px; 
height: 700px;  
position: relative;
margin:0 auto;
}
.view{ 
width: 800px;
height: 600px;  
position: absolute;
bottom: 0px;
overflow: hidden;
}
.box{ 
width: 800px; 
height: 600px;  
position: absolute;
left: 800px;
bottom: 600px;
}
.button{
width: 100px;
height: 40px;
position: relative;
top: 0px;
cursor: pointer;
border: 1px solid #fff;
margin:5px;
float: left;
}
var t = 600 //время анимации

$(document).ready(function(){
	
	$('#but1').click(function(){ 
		$('#box1').animate({left: '0px', bottom:'0px'}, t);
			setTimeout(function () {
				$('.box').not('#box1').css({ left:'800px', bottom:'600px', zIndex:'10'});
						$('#box1').css({zIndex:'5'}); 				
		},t);		
	});
	
	$('#but2').click(function(){
		$('#box2').animate({left: '0px', bottom:'0px'} , t);
			setTimeout(function () {
				$('.box').not('#box2').css({left:'800px', bottom:'600px', zIndex:'10'});						
						$('#box2').css({zIndex:'5'}); 
		},t);	
	});

	$('#but3').click(function(){ 
		$('#box3').animate({left: '0px', bottom:'0px'}, t);
			setTimeout(function () {
				$('.box').not('#box3').css({left:'800px', bottom:'600px', zIndex:'10'});							
						$('#box3').css({zIndex:'5'}); 
		},t);							
	});


});
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2013, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Фридрих,
setTimeout то вам зачем???
Ответить с цитированием
  #3 (permalink)  
Старый 02.10.2013, 16:47
Аспирант
Отправить личное сообщение для Фридрих Посмотреть профиль Найти все сообщения от Фридрих
 
Регистрация: 10.09.2013
Сообщений: 59

пока один див не наедет полностью на другой, потом нижний див - в исходную
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2013, 16:54
Аспирант
Отправить личное сообщение для Фридрих Посмотреть профиль Найти все сообщения от Фридрих
 
Регистрация: 10.09.2013
Сообщений: 59

вот не знаю, как лучше сократить сценарий скрипта, ведь он повторяется, только кнопки и дивы разные....может swich или if else....?
может есть что то проще? подскажите плз, куда копать????
Ответить с цитированием
  #5 (permalink)  
Старый 02.10.2013, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Фридрих,
лучше копать в сторону .each() но можно и без него ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</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: 800px;
height: 700px;
position: relative;
margin:0 auto;
}
.view{
width: 800px;
height: 600px;
position: absolute;
bottom: 0px;
overflow: hidden;
}
.box{
width: 800px;
height: 600px;
position: absolute;
left: 800px;
bottom: 600px;
}
.button{
width: 100px;
height: 40px;
position: relative;
top: 0px;
cursor: pointer;
border: 1px solid #fff;
margin:5px;
float: left;
}
  </style>
  <script>
     $(function()
			{
        var t = 600, buttons = $('.button'), boxs = $('.box');
	    buttons.click(function(){
        var i = buttons.index(this),
        box = boxs.eq(i);
        boxs.stop(true,true);
		box.animate({left: '0px', bottom:'0px'}, t,
			function () {
				boxs.not(box).css({left:'800px', bottom:'600px', zIndex:'10'});
						box.css({zIndex:'5'});
		});
	});

			});
  </script>
</head>

<body>
 <div class='master'> <!-- контейнер -->

	<div class='button' id='but1'>1</div>
	<div class='button' id='but2'>2</div>
	<div class='button' id='but3'>3</div>

<div class='view'> <!-- видимая область -->

	<div class='box' id='box1'><img src='http://javascript.ru/forum/images/smilies/victory.gif'></div>
	<div class='box' id='box2'><img src='http://javascript.ru/forum/images/smilies/dance3.gif'></div>
	<div class='box' id='box3'><img src='http://javascript.ru/forum/images/smilies/cray.gif'></div>

</div>
</div>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 02.10.2013, 17:23
Аспирант
Отправить личное сообщение для Фридрих Посмотреть профиль Найти все сообщения от Фридрих
 
Регистрация: 10.09.2013
Сообщений: 59

спасибо большое, всё работает как надо....
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кастомный селект, чекбокс, радио vostok Ваши сайты и скрипты 0 12.08.2013 00:33
Галерея картинок Riels jQuery 5 26.10.2012 17:18
Помогите, пжлста, найти (или написать) скрипт для смены картинок. Artweb Работа 9 25.02.2011 11:28
Галерея картинок Cross Общие вопросы Javascript 3 06.10.2010 23:32