0

Подскажите, что я делаю не так, почему у меня не правильно работает данный пример

const nodeElement = document.querySelector(".main_cont");
const nodeChild = document.querySelector('.img_cont img');
const nodeParent = document.querySelector('.img_cont');

let x;
let y;
let x2;
let y2;
const offsetLeft = -parseFloat(nodeChild.offsetWidth - nodeParent.offsetWidth) / 2;
const offsetHeight = -parseFloat(nodeChild.offsetHeight - nodeParent.offsetHeight) / 2;


nodeElement.addEventListener("mouseenter", (evt) => {
  x = evt.pageX;
  y = evt.pageY;

  nodeParent.addEventListener("mousemove", (evt) => {
    x2 = evt.pageX;
    y2 = evt.pageY;
    let p = x2 - x;
    let d = y2 - y;

    nodeChild.style.position = "absolute";
    nodeChild.style.right = "auto";
    nodeChild.style.bottom = "auto";
    nodeChild.style.maxWidth = "none";
    nodeChild.style.maxHeight = "none";

    nodeChild.style.left = offsetLeft - p + "px";
    nodeChild.style.top = offsetHeight - d + "px";
  });

});

nodeElement.addEventListener("mouseleave", () => {
  nodeChild.style = "";
})
body {font-family: Arial, Helvetica, sans-serif; color: #333;}
.diag_cont, h1 {width: 500px; margin: 20px auto;}
.diag_cont ul {list-style-type: square;}
.diagramm {width: 450px; border-bottom: 1px solid #666; border-left: 1px solid #666; position: relative; height: 300px;}
.diag_item {border: 1px solid #ccc; margin-left: 5px; float:left; text-align: center; position: absolute; bottom: 3px; color: #fff; font-weight: bold;}
.diag_item#d1 {background: #f00;}
.diag_item#d2 {background: #f0f;}
.diag_item#d3 {background: #ff0;}
.diag_item#d4 {background: #00f;}
.diag_item#d5 {background: #0ff;}
.diag_item#d6 {background: #555;}
.diag_cont ul li span {color: red;}

.main_cont {width: 500px; height: 300px; position: relative; margin: 20px auto; overflow: hidden;}
.img_cont {width: 1600px; height: 1200px; position: absolute;}
.img_cont img {width: 1600px; height: 1200px;}

.news_list {font-size: 12px; width: 800px; margin: 0 auto;}
.news_list .news_item h4 {color: #7D26CD; margin: 0px 0 3px 0; font-size: 16px;}
.news_list .news_item .img {float:left; margin-right: 5px; padding: 5px 0;}
.news_list .news_item .img img {width: 50px;}
.news_list .news_item {cleaR:left; border-bottom: 1px dotted #7D26CD; margin-bottom: 5px; padding-bottom: 5px;}
.news_list .news_item .date {font-size: 10px; color: #666; float:right;}
.news_list .news_item .text {clear:right;}
.switcher {padding: 5px; margin-bottom: 10px;}
.switcher a {display: block; floaT:left; margin: 0 1px; width: 10px; height: 11px; background: url(../images/news.png) no-repeat;}
.switcher a.list {background-position: -11px 0px;}
.switcher a.full {background-position: -11px -10px;}
.switcher a.list.active {background-position: 0px 0px;}
.switcher a.full.active {background-position: 0px -10px;}

.news_list.list {} 
.news_list.list .news_item .text {display: none;}
.news_list.list .news_item .date {float: left; padding: 1px 10px 2px 0;}
.news_list.list .news_item .img {display: none;}
.news_list.list .news_item h4 {font-size: 12px;}


.tooltip {position: relative;}
.tooltip_bg {width: 100px; padding: 5px; background: #f1ddfd; border: 1px dotted #93C; color: #666; displaY: block; position: absolute;}
.tooltip_bg .tooltip_text {text-decoration: none; font-size:10px;}
.tooltip_bg .tooltip_bg_bot {background: url(../images/tip.png); width: 15px; height: 12px; displaY:block; margin-bottom: -17px; margin-top: 5px;}


.rot_img_cont {width: 880px; margin: 0 auto;}
.rot_img_cont .rot_img_item {float:left; margin: 5px; border: 5px solid #7D26CD; position: relative; z-index: 5;}


/*.rot_img_cont .rot_img_item {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg));
}*/

.rot_img_cont .rot_img_item {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg));
-webkit-transition:all 400ms;   
-moz-transition:all 400ms;
-o-transition:all 400ms;
transition:all 400ms; 
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

.rot_img_cont .rot_img_item img {
-webkit-border-radius: 95px;
-moz-border-radius: 95px;
border-radius: 95px;
	}

.rot_img_cont .rot_img_item:hover {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg));
}

img {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    outline: 0;
    border: 0;
}
<div class="main_cont">
  <div class="img_cont">
    <img src="http://lorempixel.com/400/400">
  </div>
</div>

3
  • Правильно работает. 29 ноя 2018 в 18:46
  • Объявлен конкурс, угадай, что я пытался сделать....
    – Air
    29 ноя 2018 в 18:59
  • Эникейщик не совсем
    – brin gonor
    29 ноя 2018 в 19:06

1 ответ 1

3

Если вам нужно чтобы при наведении в углы контейнера показывались соответствующие углы картинки, то я делал так. А что вы пытаетесь сделать я не знаю.

$( ".container" ).mousemove(function( event ) {
  var border = 50;
  var x=event.pageX-$(this).offset().left;
  var y=event.pageY-$(this).offset().top;
  var newx=(x/$(this).width())*($("img", this).width()-$(this).width()+2*border)-border;
  var newy=(y/$(this).height())*($("img", this).height()-$(this).height()+2*border)-border;
  $("img", this).css({left: -newx, top: -newy});
});
.container {
  position:relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.container img {
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://lorempixel.com/400/400" alt="">
</div>

3
  • Вот пример как мне надо bigl.ua/…
    – brin gonor
    29 ноя 2018 в 19:08
  • У меня так и сделано, только миниатюры нет. И border можно меньше поставить.
    – coder675
    29 ноя 2018 в 19:10
  • да уже увидел СПАСИБО
    – brin gonor
    29 ноя 2018 в 19:12

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.