JSFiddle - React, Tailwind, and code Playground

by crab1127

HTML

<div id="box">
  <ul>
    <li>
      <img src="http://fgm.cc/learn/lesson5/img/shirt_1.jpg" />
    </li>
    <li>
      <img src="http://fgm.cc/learn/lesson5/img/shirt_2.jpg" />
    </li>
    <li>
      <img src="http://fgm.cc/learn/lesson5/img/shirt_3.jpg" />
    </li>
    <li>
      <img src="http://fgm.cc/learn/lesson5/img/shirt_4.jpg" />
    </li>
  </ul>
</div>
<div id="big">
  <div></div>
</div>

CSS

html, body {
  overflow:hidden;
}
body, div, ul, li {
  margin:0;
  padding:0;
}
#box ul {
  width:768px;
  height:172px;
  list-style-type:none;
  margin:10px auto;
}
#box li {
  float:left;
  width:170px;
  height:170px;
  cursor:pointer;
  display:inline;
  border:1px solid #ddd;
  margin:0 10px;
}
#box li.active {
  border:1px solid #a10000;
}
#box li img {
  width:170px;
  height:170px;
  vertical-align:top;
}
#big {
  position:absolute;
  width:400px;
  height:400px;
  border:2px solid #ddd;
  display:none;
}
#big div {
  position:absolute;
  top:0;
  left:0;
  width:400px;
  height:400px;
  opacity:0.5;
  filter:alpha(opacity=50);
  background:#fff url(http://fgm.cc/learn/lesson5/img/loading.gif) 50% 50% no-repeat;
}

JavaScript

var aLi = document.getElementsByTagName("li");
var oBig = document.getElementById("big");
var oLoading = oBig.getElementsByTagName("div")[0];
var i = 0;

for (i = 0; i < aLi.length; i++) {
  aLi[i].index = i;
  aLi[i].onmouseover = function () {
    var oImg = document.createElement('img');
    var img = new Image();
    img.src = oImg.src = aLi[this.index].getElementsByTagName('img')[0].src.replace('.jpg', '_big.jpg');
    oBig.appendChild(oImg);
    this.className = 'active';
    oBig.style.display = oLoading.style.display = "block";

    img.complete ? oLoading.style.display = 'none' : (oImg.onload = function () {
      oLoading.style.display = 'none';
    })
  };

  aLi[i].onmousemove = function (event) {
    var event = event || window.event;
    var iWidth = document.documentElement.offsetWidth - event.clientX;
    oBig.style.top = event.clientY + 20 + 'px';
    oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + 'px';
  };

  aLi[i].onmouseout = function () {
    this.className = '';
    oBig.style.display = 'none';
    oBig.removeChild(oBig.lastChild)
  };
}