|
Сообщение от злобная_пипа
|
|
Блок для картинок? ето как?
|
это ваши строки 28 и 36
ниже вариант рабочий, но неправильный для клиентов (для примера)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
text-align: center; position: relative;
}
.menu { width:300px; margin: 14%; display: inline; }
.pic1 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 0px }
.pic2 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 100px }
.pic3 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 200px }
.pic4 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 300px }
.pic5 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 400px }
.pic6 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 500px }
.pic7 { border: solid 0px; height:200px; position: absolute; top: 0px; left: 600px }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".pic1, .pic2, .pic3, .pic4, .pic5, .pic6, .pic7")
.hover(function() {
$(this).nextAll().stop().animate({ left: "+=200px" }, 300);
}, function() {
$(this).nextAll().stop().animate({ left: "-=200px" }, 'fast');
});
})
</script>
</head>
<body>
<div class="menu" >
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic1"/>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic2"/>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic3"/>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic4"/>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic5"/>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic6"/>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" class="menu pic7"/>
</div>
</body>
</html>