день добрый!
не судите строго, я всего 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);
});
});