Javascript.RU

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

Как совместить фон блока и фон body?
Есть примерно такая разметка
<body>
<div class="Item1" id="Item1"><a href="#">О компании</a></div>
<div class="Item2" id="Item2"><a href="#">Наши услуги</a></div>

У <body> есть фоновый рисунок.
В момент нажатия на ссылку блоку со ссылкой присваивается фон <body> с тем же масштабом. Масштаб определяется так

var realWidth = $(window).width() > $(window).height() ? img.width/img.height * $(window).height() :$(window).width();
var scaleWidth = realWidth/$(window).width();

Фон блока подгоняется через background-size и background-position.

Все вроде работает, но есть несовпадение на примерно +процент и в итоге небольшое смещение
Как добиться полного совпадения?
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2018, 21:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

макет или ссылку
Ответить с цитированием
  #3 (permalink)  
Старый 25.11.2018, 21:34
Интересующийся
Отправить личное сообщение для i501 Посмотреть профиль Найти все сообщения от i501
 
Регистрация: 25.11.2018
Сообщений: 23

Макет на бумаге
Набросал примерно. По клику на item1 (например) фон <body> назначается div и также позиционируется. Примерно вот так.
Изображения:
Тип файла: jpg image.jpg (68.4 Кб, 7 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2018, 21:38
Интересующийся
Отправить личное сообщение для i501 Посмотреть профиль Найти все сообщения от i501
 
Регистрация: 25.11.2018
Сообщений: 23

Уточнение - фон на весь экран и соответственно масштабируется
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2018, 21:45
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

i501,
а если блоку задавать не фон, а стиль background: inherit; ?
То есть фон у блока станет прозрачным (будет фон из body).
Ответить с цитированием
  #6 (permalink)  
Старый 25.11.2018, 21:50
Интересующийся
Отправить личное сообщение для i501 Посмотреть профиль Найти все сообщения от i501
 
Регистрация: 25.11.2018
Сообщений: 23

При клике...
При клике на ссылку div увеличивается, появляется описание и частично перекрываются соседние дивы. Перекрытие соседних дивов закрыто фоном, который совпадает с body.
Пардон, отредактировал. Было "не закрыто". Ошибка
Ответить с цитированием
  #7 (permalink)  
Старый 25.11.2018, 22:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

i501,
сделайте макет!
Ответить с цитированием
  #8 (permalink)  
Старый 25.11.2018, 22:35
Интересующийся
Отправить личное сообщение для i501 Посмотреть профиль Найти все сообщения от i501
 
Регистрация: 25.11.2018
Сообщений: 23

Наложение дивов должно выглядить примерно так
Изображения:
Тип файла: jpg image-1.jpg (146.8 Кб, 9 просмотров)
Ответить с цитированием
  #9 (permalink)  
Старый 26.11.2018, 10:47
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

i501,
Макет - имеется в виду не картинка, а минимальный скрипт, демонстрирующий требуемую функциональность и возникающие проблемы.
Ответить с цитированием
  #10 (permalink)  
Старый 26.11.2018, 12:02
Интересующийся
Отправить личное сообщение для i501 Посмотреть профиль Найти все сообщения от i501
 
Регистрация: 25.11.2018
Сообщений: 23

//Клик по item1
//item1 назначается фон body
//получаем размеры файла фона, размеры окна и вычисляем коэф. масштабирования
//зная положение item1 позиционируем фон блока в соответствие с фоном body (точно не получается, небольшая разница есть). Скрипт я привел. Причем смещение вызвано масштабированием.
//блок плавно увеличивается, перекрывает соседние блоки и появляется описание

Неточность явно в вычислениях коэффициента масштабирования
Встречный вопрос - можно ли напрямую получить размеры отрендеренной картинки фона. Без вычислений через размеры окна и размеры исходного фонового файла?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать что бы при открытии блока, вместе с ним двигался другой блок(стрелки)? freeman0204 Общие вопросы Javascript 2 21.02.2016 15:15
Как подставить переменные js в ID блока? malsyst Общие вопросы Javascript 4 05.12.2015 13:56
Как скосить углы у блока soltx Элементы интерфейса 1 09.05.2015 01:16
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 22:53
как совместить скрипты? savinefim Общие вопросы Javascript 2 25.11.2013 15:47