При увеличении картинки смещаются остальные изображения

@Евгений 86 · Регистрация: 21.03.2016

Студворк — интернет-сервис помощи студентам

Добрый день! я на jquery прописал скрипт увеличения фото, но у меня разъезжаются картинки когда происходит увеличение соседней. Подскажите, что нужно сделать?
html-код:
<ul id="listing1">
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 100</p>
<p price="1100" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 200</p>
<p price="1200" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 300</p>
<p price="1300" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 400</p>
<p price="1400" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 500</p>
<p price="1500" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 600</p>
<p price="1600" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 300</p>
<p price="1300" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="../images/eda.jpg"><center>
</div>
<p class="price-tovar">1 300</p>
<p price="1300" rel="1" class="add-tovar"></p>
</li>
</ul>

css

#listing1 {
list-style: none;
}
.fixblock1 {
padding-top: 15px;
}
#listing1 li {
float: left;
margin-left: 50px;
width: auto;
height: 250px;
}
#listing1 p.add-tovar {
background-image: url(images/add1.png);
background-repeat: no-repeat;
display: inline-block;
width: 30px;
height: 30px;
cursor: pointer;
margin-left: 4px;
z-index: 0;
}
#listing1 p.add-tovar:hover {
background-image: url(images/add2.png);
background-repeat: no-repeat;
}
#listing1 p.add-tovar:active {
background-image: url(images/add3.png);
background-repeat: no-repeat;
}
#listing1 p.price-tovar {
float: left;
margin-top: 4px;
margin-left: 120px;
font: 17px sans-serif;
}
.fixblock1 {
height: 200px;
padding-top: 10px;
}
#listing1 img {
position: relative;
cursor: pointer;
z-index: 0;
}
.massagecart {
border: 1px solid black;
padding: 3px;
font: 13px;
display: none;
position: absolute;
background-color: white;
}

@Redzep · 17.04.2016, 13:15

Что тут можно смотреть без js кода, скинь все это в jsfiddle например

Добавлено через 41 секунду
https://jsfiddle.net/

@Евгений 86 · 17.04.2016, 13:18 **[ТС]**

$("#listing1 img").hover(function(){
$(this).parent().parent().css("z-index",99);
$(this).animate({
height: "300",
width: "300",
left: "-=50",
top: "-=50"
}, "fast");
}, function() {
$(this).parent().parent().css("z-index",0);
$(this).animate({
height: "200",
width: "200",
left: "+=50",
top: "+=50"
}, "fast");
});

@Redzep · 17.04.2016, 13:23

И весь html код скинь

@Евгений 86 · 17.04.2016, 13:29 **[ТС]**

<!doctype html>
<html lang="en">
<head>
<title>Стикеры_Космос</title>
<meta charset="utf-8">
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="../scripts/wow.min.js"></script>
<link rel="stylesheet" media="all" href="../animate.css">
<link rel="stylesheet" type="text/css" href="../sticker.css">
<script src="../scripts/jquery.cycle.all.js"></script>
<script src="../sticker.js"></script>
</head>
<body>
<div id="conteiner">
<div id="slider">
<div id="box">
<div class="back"></div>
<div class="images">
<img src="https://www.cyberforum.ru/images/1.jpg" width="900" height="400">
<img src="https://www.cyberforum.ru/images/2.jpg" width="900" height="400">
<img src="https://www.cyberforum.ru/images/3.jpg" width="900" height="400">
</div>
<div class="next"></div>
</div>
</div>
<ul id="nav">
<li><a href="https://www.cyberforum.ru/index.html">Католог стикеров</a>
<ul>
<li><a href="https://www.cyberforum.ru/katalog/cosmos.html">Космос</a></li>
<li><a href="https://www.cyberforum.ru/katalog/writers.html">Писатели</a></li>
<li><a href="https://www.cyberforum.ru/katalog/series.html">Сериалы</a></li>
<li><a href="https://www.cyberforum.ru/katalog/cinema.html">Кино</a></li>
<li><a href="https://www.cyberforum.ru/katalog/food.html">Еда</a></li>
</ul>
</li>
<li><a href="#">Как доставляем</a></li>
<li><a href="#">Отзывы</a></li>
</ul>
<div id="block-cart">
<p>Моя корзина</p>
<p>Товаров: <span class="count">0</span></p>
<p>На сумму: <span price="0" id="price">0</span></p>
</div>
<div class="glava wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s"">
<h2>Космос:</h2>
</div>
<div id="blockbody" class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s">
<p class="massagecart"></p>
<ul id="listing1">
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 100</p>
<p price="1100" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 200</p>
<p price="1200" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 300</p>
<p price="1300" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 400</p>
<p price="1400" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 500</p>
<p price="1500" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 600</p>
<p price="1600" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 300</p>
<p price="1300" rel="1" class="add-tovar"></p>
</li>
<li>
<div class="fixblock1">
<center><img src="https://www.cyberforum.ru/images/eda.jpg"><center>
</div>
<p class="price-tovar">1 300</p>
<p price="1300" rel="1" class="add-tovar"></p>
</li>
</ul>
</div>
<footer>
© 08.04.16 Web приложение для магазина стикеров
<br>
Тестовый сайт Сишненко Евгения.
</footer>
</div>

<script>
new WOW().init();
</script>
</body>
</html>

@Redzep · 17.04.2016, 13:50

Если кто хочет помочь, то вот: https://jsfiddle.net/4y3wbcsh/1/
Сейчас мне пока некогда смотреть

@Евгений 86 · 17.04.2016, 14:18 **[ТС]**

спасибо!
Буду благодарен! пробую пока что у самого не получается

Добавлено через 18 минут
Ребят, у меня получилось.
я добавил в jquery в методе animate свойство marginRight: "-100".

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Евгений 86 1 / 1 / 3 Регистрация: 21.03.2016 Сообщений: 400

	При увеличении картинки смещаются остальные изображения 17.04.2016, 12:41. Показов 1234. Ответов 6 Метки нет (Все метки) Добрый день! я на jquery прописал скрипт увеличения фото, но у меня разъезжаются картинки когда происходит увеличение соседней. Подскажите, что нужно сделать? html-код: <ul id="listing1"> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 100</p> <p price="1100" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 200</p> <p price="1200" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 300</p> <p price="1300" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 400</p> <p price="1400" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 500</p> <p price="1500" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 600</p> <p price="1600" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 300</p> <p price="1300" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="../images/eda.jpg"><center> </div> <p class="price-tovar">1 300</p> <p price="1300" rel="1" class="add-tovar"></p> </li> </ul> css #listing1 { list-style: none; } .fixblock1 { padding-top: 15px; } #listing1 li { float: left; margin-left: 50px; width: auto; height: 250px; } #listing1 p.add-tovar { background-image: url(images/add1.png); background-repeat: no-repeat; display: inline-block; width: 30px; height: 30px; cursor: pointer; margin-left: 4px; z-index: 0; } #listing1 p.add-tovar:hover { background-image: url(images/add2.png); background-repeat: no-repeat; } #listing1 p.add-tovar:active { background-image: url(images/add3.png); background-repeat: no-repeat; } #listing1 p.price-tovar { float: left; margin-top: 4px; margin-left: 120px; font: 17px sans-serif; } .fixblock1 { height: 200px; padding-top: 10px; } #listing1 img { position: relative; cursor: pointer; z-index: 0; } .massagecart { border: 1px solid black; padding: 3px; font: 13px; display: none; position: absolute; background-color: white; } 0

@Redzep 202 / 138 / 88 Регистрация: 21.12.2014 Сообщений: 369
	17.04.2016, 13:15
	Что тут можно смотреть без js кода, скинь все это в jsfiddle например Добавлено через 41 секунду https://jsfiddle.net/ 0

@Евгений 86 1 / 1 / 3 Регистрация: 21.03.2016 Сообщений: 400
	17.04.2016, 13:18 [ТС]
	$("#listing1 img").hover(function(){ $(this).parent().parent().css("z-index",99); $(this).animate({ height: "300", width: "300", left: "-=50", top: "-=50" }, "fast"); }, function() { $(this).parent().parent().css("z-index",0); $(this).animate({ height: "200", width: "200", left: "+=50", top: "+=50" }, "fast"); }); 0

@Redzep 202 / 138 / 88 Регистрация: 21.12.2014 Сообщений: 369
	17.04.2016, 13:23
	И весь html код скинь 0

@Евгений 86 1 / 1 / 3 Регистрация: 21.03.2016 Сообщений: 400
	17.04.2016, 13:29 [ТС]
	<!doctype html> <html lang="en"> <head> <title>Стикеры_Космос</title> <meta charset="utf-8"> <script src="../scripts/jquery-1.12.2.min.js"></script> <script type="text/javascript" src="../scripts/wow.min.js"></script> <link rel="stylesheet" media="all" href="../animate.css"> <link rel="stylesheet" type="text/css" href="../sticker.css"> <script src="../scripts/jquery.cycle.all.js"></script> <script src="../sticker.js"></script> </head> <body> <div id="conteiner"> <div id="slider"> <div id="box"> <div class="back"></div> <div class="images"> <img src="https://www.cyberforum.ru/images/1.jpg" width="900" height="400"> <img src="https://www.cyberforum.ru/images/2.jpg" width="900" height="400"> <img src="https://www.cyberforum.ru/images/3.jpg" width="900" height="400"> </div> <div class="next"></div> </div> </div> <ul id="nav"> <li><a href="https://www.cyberforum.ru/index.html">Католог стикеров</a> <ul> <li><a href="https://www.cyberforum.ru/katalog/cosmos.html">Космос</a></li> <li><a href="https://www.cyberforum.ru/katalog/writers.html">Писатели</a></li> <li><a href="https://www.cyberforum.ru/katalog/series.html">Сериалы</a></li> <li><a href="https://www.cyberforum.ru/katalog/cinema.html">Кино</a></li> <li><a href="https://www.cyberforum.ru/katalog/food.html">Еда</a></li> </ul> </li> <li><a href="#">Как доставляем</a></li> <li><a href="#">Отзывы</a></li> </ul> <div id="block-cart"> <p>Моя корзина</p> <p>Товаров: <span class="count">0</span></p> <p>На сумму: <span price="0" id="price">0</span></p> </div> <div class="glava wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s""> <h2>Космос:</h2> </div> <div id="blockbody" class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s"> <p class="massagecart"></p> <ul id="listing1"> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 100</p> <p price="1100" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 200</p> <p price="1200" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 300</p> <p price="1300" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 400</p> <p price="1400" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 500</p> <p price="1500" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 600</p> <p price="1600" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 300</p> <p price="1300" rel="1" class="add-tovar"></p> </li> <li> <div class="fixblock1"> <center><img src="https://www.cyberforum.ru/images/eda.jpg"><center> </div> <p class="price-tovar">1 300</p> <p price="1300" rel="1" class="add-tovar"></p> </li> </ul> </div> <footer> © 08.04.16 Web приложение для магазина стикеров <br> Тестовый сайт Сишненко Евгения. </footer> </div> <script> new WOW().init(); </script> </body> </html> 0

@Redzep 202 / 138 / 88 Регистрация: 21.12.2014 Сообщений: 369
	17.04.2016, 13:50
	Если кто хочет помочь, то вот: https://jsfiddle.net/4y3wbcsh/1/ Сейчас мне пока некогда смотреть 0

@Евгений 86 1 / 1 / 3 Регистрация: 21.03.2016 Сообщений: 400
	17.04.2016, 14:18 [ТС]
	спасибо! Буду благодарен! пробую пока что у самого не получается Добавлено через 18 минут Ребят, у меня получилось. я добавил в jquery в методе animate свойство marginRight: "-100". 0