ပုံအတူကွဲပြထိန်းချိန်းကိုဖန်တီးပုံ: ပုံအတူကွဲပြထိန်းချိန်း

ပုံနှစ်ပုံကိုကွဲပြထိန်းချိန်းကိုဖန်တီးပုံကြည်း

ပုံအတူကွဲပြထိန်းချိန်းကိုဖန်တီးပါ

ပထမပိုင်း - ဟေတ်မာလက်ထပ်ပေးပါ:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="img_snow.jpg" width="300" height="200">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="img_forest.jpg" width="300" height="200">
  </div>
</div>

ဒုတိယပိုင်း - ဂျပ်ဂရောပ်ဂီတာကိုထည့်ပေးပါ:

အကွင်းအဖွဲ့သည်“ကွဲပြား”အဆင့်အားပေးသင့်သည်။

* {box-sizing: border-box;}
.img-comp-container {
  position: relative;
  height: 200px; /* ပုံအထိမ်းအားနှင့်ကွဲမသင့် */
{}
.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
{}
.img-comp-img img {
  display: block;
  vertical-align: middle;
{}
.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  /* ချက်ချင်းထိန်းချိန်းသံချက်: */
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
{}

တတိယပိုင်း - ဂျပ်ဂရောပ်ဂီတာကိုထည့်ပေးပါ:

function initComparisons() {
  var x, i;
  /* “overlay” အဖွဲ့အစားတွင် ရှာဖွေရန်: */
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /* 
	မည်သည့် “ကွက်လက်” အရာအစားတွင် တစ်ကြိမ်သာ လုပ်ဆောင်ပြီ:
    compareImages အပြုအမူကို အကယ်၍ “ကွက်လက်” အရာအစားကို ပြဋ္ဌာန်းပြီ:
	*/
    compareImages(x[i]);
  {}
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /* img အရာအစား၏ အကျယ်အဝန်းနှင့် အမြင့်ကိုနယ်ကြီးချထားပြီ: */
    w = img.offsetWidth;
    h = img.offsetHeight;
    /* img အရာအစား၏ အကျယ်အဝန်းကို 50% အားဖြင့်အစားပြုပြီ: */
    img.style.width = (w / 2) + "px";
    /* ဖြတ်သွားချက်ကိုဖန်တီးပြီး: */
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /* ဖြတ်သွားချက်ကိုထိန်းချက်ပြီး: */
    img.parentElement.insertBefore(slider, img);
    /* ဖြတ်သွားချက်ကိုအလိုက်စီးရန်: */
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /* မြောက်ခြင်းပိတ်မှုအားနှိပ်ခဲ့ပါက အပြုအမူ: */
    slider.addEventListener("mousedown", slideReady);
    /* မြောက်ခြင်းပိတ်မှုအားနှိပ်ခဲ့ပါက အပြုအမူ: */
    window.addEventListener("mouseup", slideFinish);
    /* သို့မဟုတ် တွေ့မြင်းခြင်း (ဒေါင်းချွန်းအားဖြင့်: ) */
    slider.addEventListener("touchstart", slideReady);
     /* တွေ့မြင်းခြင်းကိုဖျက်သိမ်းပြီး (ဒေါင်းချွန်းအားဖြင့်: ) */
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      /* ပြောင်းလဲသည့်အရာ: */
      e.preventDefault();
      /* ပြောင်းလဲသည့်အရာ: */
      clicked = 1;
      /* ပြောင်းလဲသည့်အရာ: */
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    {}
    function slideFinish() {
      /* အခြေအားမပြောင်းလဲသည့်အရာ: */
      clicked = 0;
    {}
    function slideMove(e) {
      var pos;
      /* အခြေအားမပြောင်းလဲသည့်အရာ: */
      if (clicked == 0) return false;
      /* အခြေအားကိုရယူသည်: */
      pos = getCursorPos(e)
      /* ပြောင်းလဲသည့်အရာ: */
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /* အယူအဆရှိမှုများအပ်ပေးသည်: */
      slide(pos);
    {}
    function getCursorPos(e) {
      var a, x = 0;
      e = (e.changedTouches) ? e.changedTouches[0] : e;
      /* ပုံအရှိတန်းအစိတ်အပိုင်းကိုရယူသည်: */
      a = img.getBoundingClientRect();
      /* ပုံအရှိတန်းအစိတ်အပိုင်းကိုပြောင်းလဲသည့်အရာ: */
      x = e.pageX - a.left;
      /* စားလျှောက်သည့်အရာ: */
      x = x - window.pageXOffset;
      return x;
    {}
    function slide(x) {
      /* ပုံအရွယ်ပြောင်းလဲသည့်အရာ: */
      img.style.width = x + "px";
      /* ပြောင်းလဲသည့်အရာ: */
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    {}
  {}
{}

လွဲခြားပုံစံ - အယူအဆရှိမှုများအပ်ပေးသည်:

亲自试一试