Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2015, 12:39
Интересующийся
Отправить личное сообщение для злобная_пипа Посмотреть профиль Найти все сообщения от злобная_пипа
 
Регистрация: 01.10.2015
Сообщений: 15

Налажал гдето в коде и не могу понять где.
Налажал где то в коде и не могу понять где.
Картинка должна отступить в левую сторону на 200пх но скрипт не работает. Подскажите в чем проблема.
$(".pic1, .pic2, .pic3, .pic4, .pic5, .pic6, .pic7")  
  .hover(function() {  
    $(this).stop().animate({ left: "-200px" }, 300);  
  }, function() {  
    $(this).stop().animate({ left: "0px" }, 'fast');  
  });

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript" src="menu.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylecss.css" />
</head>

<body>
<style>
   .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>
<center>
<img src="im1.png" alt="" class="menu pic1"/>  
<img src="im2.png" alt="" class="menu pic2"/>  
<img src="im3.png" alt="" class="menu pic3"/>  
<img src="im4.png" alt="" class="menu pic4"/>  
<img src="im5.png" alt="" class="menu pic5"/>  
<img src="im6.png" alt="" class="menu pic6"/>  
<img src="im7.png" alt="" class="menu pic7"/>  
</center>

</body>
</html>
Изображения:
Тип файла: jpg im7.jpg (21.2 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2015, 13:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

злобная_пипа,
либо скрипт вниз страницы либо в ready
и блок бы неплохо поставить относительно которого двигаться картинкам
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2015, 14:18
Интересующийся
Отправить личное сообщение для злобная_пипа Посмотреть профиль Найти все сообщения от злобная_пипа
 
Регистрация: 01.10.2015
Сообщений: 15

Сообщение от рони Посмотреть сообщение
злобная_пипа,
либо скрипт вниз страницы либо в ready
и блок бы неплохо поставить относительно которого двигаться картинкам
Блок для картинок? ето как?
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2015, 14:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от злобная_пипа
Блок для картинок? ето как?
это ваши строки 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>
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2015, 15:31
Интересующийся
Отправить личное сообщение для злобная_пипа Посмотреть профиль Найти все сообщения от злобная_пипа
 
Регистрация: 01.10.2015
Сообщений: 15

Точно, спасибо) Нужно больше практиковаться
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема с рекурсией, не могу понять почему скрипт не выходит из неё. Flirer Общие вопросы Javascript 5 24.12.2009 01:01
Не могу понять какая кодировка Andrey Sipin Events/DOM/Window 1 05.10.2009 18:25
Предполагается наличие объекта... не могу понять где косяк mp3moto Internet Explorer 3 18.06.2009 04:34
не могу понять в чём ошибка scuter Общие вопросы Javascript 2 28.08.2008 15:22
Не могу понять как работает jQuery kostiaGt jQuery 2 20.07.2008 08:42