Подскажите что я делаю не так в коде?

175

19 мая 2019, 05:50

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

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>

Answer 1

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

$( ".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>