Форум

Dilettante_Pro · #11 (**permalink**) 26.11.2018, 12:49

Сообщение от i501

Скрипт я привел

Но не полный. Значительная часть функциональности скрипта описана словами.
Что такое img.width/img.height ?

Сообщение от i501

У <body> есть фоновый рисунок.

Как задан?

i501 · #12 (**permalink**) 26.11.2018, 14:50

img = new Image() ;
img.src = 'bg.jpg';

У body тот же имж через css

Dilettante_Pro · #13 (**permalink**) 26.11.2018, 16:04

<style>
body {
  background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat;
  background-size: 100%;
}
div.central {
   position:fixed;
  background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat;
   opacity:1;
   top:40px;
   left:200px;
   width:300px;
   border:1px solid black;
   z-index:2;
}
div.left {
   position:fixed;
   top:50px;
   left:50px;
   width:300px;
   border:1px solid black;
      z-index:1;
}
</style>
<body>
  <div class = "left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>
  <div class = "central">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</body>
<script>
   var central = document.querySelector("div.central");
   central.style.backgroundPosition = "-" + (central.offsetLeft + 1) + " -" + (central.offsetTop + 1);
   central.style.backgroundSize = ((document.querySelector("body").clientWidth / central.clientWidth) * 100) + "%";

</script>

+ 1 это толщина бордера

PS: чуть-чуть расползание есть..

i501 · #14 (**permalink**) 26.11.2018, 20:20

Всячески плюсую, пан профэссор.
Ваша метода через querySelector намного проще.
Поработаю напильником. Надеюсь получица

i501 · #15 (**permalink**) 28.11.2018, 20:56

Все вроде работает (спасибо Dilettante_Pro), но нарисовалась еще одна проблема - при клике на блок
- копируем в блок фоновую картинку
- подгоняем масштаб и положение
- плавно увеличиваем блок. И фон масштабируется вместе с блоком - это проблема. Можно конечно в цикле каждый раз при увеличении на, скажем 1%, вызывать скрипт. Вопрос - как зафиксировать фон блока, что бы он не масштабировался вместе с блоком?

рони · #16 (**permalink**) 28.11.2018, 22:43

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<style>
body {
  background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat;
  background-size: 100%;
  background-position: 0 0;
  transition: 2s;
}
div.central {
   background-size: inherit;
   position:fixed;
   background: url(https://bandaumnikov.ru/files/posting/tablica-pifagora.jpg) no-repeat ;
   opacity:1;
   top:140px;
   left:200px;
   width:300px;
   height: 130px;
   border:1px solid black;
   z-index:2;
   overflow: hidden;
   transform: scale(0);
   transition: transform 5s;
}
div.left {
   position:fixed;
   top:50px;
   left:50px;
   width:300px;
   border:1px solid black;
   z-index:1;
}
.central.big {
  transform: scale(1);
}

</style>
<body>
  <div class = "left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>
  <div class = "central">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</body>
<script>
   var central = document.querySelector("div.central");
   central.style.backgroundPosition = central.offsetLeft  + "px " + central.offsetTop + "px";
   window.setTimeout(function() {
    central.classList.add("big")
   }, 2000)
   window.setTimeout(function() {
     document.body.style.backgroundPositionX  = "300px";
   }, 15000)
</script>

</body>
</html>

Dilettante_Pro · #17 (**permalink**) 29.11.2018, 10:14

рони,

div.central {
   background-size: inherit;

central.style.backgroundPosition = central.offsetLeft  + "px " + central.offsetTop + "px";

Красиво!

i501 · #18 (**permalink**) 29.11.2018, 10:50

Круто. инхерит заменил большинство моих велосипедов js
Спасибо. Попробую на реальном коде

Форум

Справочник

Discord чат

Курсы javascript