* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 1000px;
  height: 600px;
  margin: 50px auto;
  font-size: 0;
}

.left-img {
  width: 490px;
  height: 510px;
  margin-right: 16px;
  border: 1px solid #eee;
  display: inline-block;
  /* 圖片 */
  background-image: url(./images/imgA_2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* 遮罩層相對我進(jìn)行定位 */
  position: relative;
}
.mask {
  width: 230px;
  height: 230px;
  background-image: url(./images/bg.png);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.right-img {
  width: 490px;
  height: 510px;
  border: 1px solid #eee;
  display: inline-block;
  background-image: url(./images/imgA_3.jpg);
  background-repeat: no-repeat;
  opacity: 0;
}

.img-list-wrapper {
  width: 490px;
  text-align: center;
  margin-top: 10px;
}
.img-list {
  display: inline-block;
}
.img-list li {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 0 5px;
  cursor: pointer;
  /* background-image: url(./images/imgA_1.jpg); */
  background-repeat: no-repeat;
  /* border: 2px solid #000; */
  border: 1px solid #eee;
}
.img-list li.active{
  border: 1px solid #000;
}

//數(shù)據(jù)邏輯  界面邏輯 事件邏輯
// 單一元素
function $(selector) {
  return document.querySelector(selector);
}

// 多個(gè)元素
function $$(selector) {
  return document.querySelectorAll(selector);
}

// 初始化數(shù)據(jù)圖片
var imgs = {
  // 小圖
  small: ['imgA_1.jpg', 'imgB_1.jpg', 'imgC_1.jpg'],
  // 中圖
  middle: ['imgA_2.jpg', 'imgB_2.jpg', 'imgC_2.jpg'],
  // 大圖
  large: ['imgA_3.jpg', 'imgB_3.jpg', 'imgC_3.jpg']
}
var smallImge = $('.img-list');
var minddleImage = $('.left-img');
var bigImage = $('.right-img');
var mask = $('.mask');
function initSmall(){
  var html='';
  for(var i = 0;i<imgs.small.length;i++){
    html+='<li style="background-image:url(./images/'+imgs.small[i]+') "></li>';
  }
  smallImge.innerHTML=html;
  //默認(rèn)選中第一個(gè)
  $('.img-list li').className = 'active';
}

function init(){
  initSmall();
  bindEvent();
}
var bindEvent = function(){
  //事件委托綁定事件 其原理是用事件的冒泡實(shí)現(xiàn)的
  //小圖切換大圖事件
  smallImge.addEventListener('click', smallImgeHandle);
  //放大鏡事件
  //鼠標(biāo)移動 和 鼠標(biāo) 離開
  minddleImage.addEventListener('mousemove', mouseHandle);
  minddleImage.addEventListener('mouseleave',leaveHandle)
}
var smallImgeHandle = function(e){
  console.dir(e.target.tagName)
  if(e.target.tagName === 'LI'){
    //將之前選中的項(xiàng)的狀態(tài)取消掉
    var selected = $('.img-list .active');
    if(selected){
      selected.className = '';
    }
    e.target.className = 'active';

    //切換中圖和大圖
    //先取到 目標(biāo)元素在列表中的下標(biāo)
    var lis = smallImge.querySelectorAll('li');
    var index = [].indexOf.call(lis,e.target);
    minddleImage.style.backgroundImage = 'url(./images/'+imgs.middle[index]+')';
    bigImage.style.backgroundImage = 'url(./images/'+imgs.large[index]+')';
  }
}
var mouseHandle = function(e){
  console.log(123);
  mask.style.opacity = 1;
  bigImage.style.opacity = 1;
  var cx = e.clientX;//鼠標(biāo)點(diǎn)離視口的左邊距離
  var cy = e.clientY;//鼠標(biāo)點(diǎn)離視口的上邊距離
  var mcx = minddleImage.offsetLeft;//中圖的容器離視口的左邊距離
  var mcy = minddleImage.offsetTop;//中圖的容器離視口的上邊距離
  var left = cx - mcx - mask.offsetWidth / 2; //mask離中圖的容器的左邊距離
  var top = cy - mcy - mask.offsetHeight / 2;//mask離中圖的容器的上邊距離
  // 注意點(diǎn):設(shè)置元素的尺寸和位置會導(dǎo)致瀏覽器reflow 瀏覽器為了優(yōu)化性能不會立馬reflow 會等到最后都設(shè)置完之后 會進(jìn)行一次reflow
  var maxLeft = minddleImage.offsetWidth - mask.offsetWidth;//最大左側(cè)偏移量
  var maxTop = minddleImage.offsetHeight - mask.offsetHeight;//最大頭部偏移量
  console.log('left:'+left)
  console.log('top:'+top)

  //處理邊界條件
  if(left<=0){
    left = 0;
  }
  if(top<=0){
    top = 0;
  }
  if(left>=maxLeft){
    left = maxLeft;
  }
  if(top>=maxTop){
    top = maxTop;
  }
  mask.style.left = left + 'px';
  mask.style.top = top + 'px';
  //移動大圖的偏移量
  bigImage.style.backgroundPositionX = -left + 'px';
  bigImage.style.backgroundPositionY = -top + 'px';
}
var leaveHandle = function(){
  mask.style.opacity = 0;
  bigImage.style.opacity = 0;
}
init();