使用 Javascript 使图像恢复原状 - OpenCart 2.3

Question

我写了一些 JS，让我用不同的图像替换产品页面上的主图像。这部分工作得很好。但是，一旦鼠标离开，我需要将原始图像 return 。我无法让它工作。

此外，我想为此添加延迟，这样当我移开鼠标时，在变回原始图像之前会有大约 1/4 秒的延迟。这一切都在OC 2.3的产品页面上完成。

this.imagePreview = function(){ 

  $("a.preview").mouseleave(function(e){
    $("#image").attr("src",default_image);         
  });

  $("a.preview").hover(function(e){
    $("#image").attr("src",this.rel);         
  });

    $(document).ready(function(){
    default_image = $("#image").attr("src");
    imagePreview();

});

谁能帮我写一点额外的代码？我尝试过的所有其他方法均无效。

Answer 1

试试这个代码：

$("a.preview").mouseleave(function(){
 setTimeout(function () {
        var default_image = $("#defaultImage").attr("src");
  $("#image").attr("src",default_image);   
    }, 3000);
 });

Answer 2

您可以使用 JavaScript 获得所需的结果。

(function() {
  var img, defaultImage, preview, i, hnd;
  img = document.getElementById("image"); // Gets the image element.
  defaultImage = img.src; // Sets the image src attribute to the defaultImage variable.
  preview = document.querySelectorAll(".preview"); // Gets the elements with css selector is «.preview».

  for (i = 0; i < preview.length; i++) {
    /* Adds the mouseover event to the preview element. */
    preview[i].addEventListener("mouseover", function() {
      img.src = this.rel;
      clearTimeout(hnd); // Reset the timeout handler.
    });

    /* Adds the mouseleave event to the preview element. */
    preview[i].addEventListener("mouseleave", function() {
      hnd = setTimeout(function() {
        img.src = defaultImage;
      }, 250); // 1/4 second delay.

    });
  }
})();

#list li {
  margin: 10px;
}

<img id="image" src="https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_08-32.png" />

<ul id="list">
  <li>
    <a class="preview" href="#" rel="https://cdn3.iconfinder.com/data/icons/device-icons-2/512/BT_computer-32.png">Computer</a>
  </li>
  <li>
    <a class="preview" href="#" rel="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/29.Mac-32.png">Mac</a>
  </li>
  <li>
    <a class="preview" href="#" rel="https://cdn2.iconfinder.com/data/icons/crystalproject/32x32/devices/laptop.png">Laptop</a>
  </li>
</ul>

使用 Javascript 使图像恢复原状 - OpenCart 2.3

Use Javascript to make image go back to original - OpenCart 2.3

javascript

opencart