卡卡網(wǎng)

當(dāng)你縮小一張大圖時，圖像細(xì)節(jié)可能變得不夠清晰，文字信息可能變得模糊不清不再可讀。有沒有一種可能，既能看清整張圖片，也不影響文字的可讀性？有一種辦法，就是讓圖片可隨鼠標(biāo)移動，如下圖。

demodownload

怎么樣，是不是挺酷的。

本文我將給大家介紹如何用JS+CSS來實(shí)現(xiàn)這個效果。

功能介紹

鼠標(biāo)在網(wǎng)頁圖片上移動時，圖片可隨鼠標(biāo)移動顯示。

該功能用純JS+CSS來實(shí)現(xiàn)。

HTML

<div class="module-jamf" id="module-jamf">
    <a href="#" class="jamf-container" id="jamf-container" target="_blank" rel="noopener">
    <div class="jamf-mover" id="jamf-mover">
    </div>
  </a>
</div>

說明：

jamf-container是圖片容器標(biāo)識，jamf-mover是一個移動顯示器。

JavaScript代碼

var container = document.querySelector("#jamf-container");
var mover = document.querySelector("#jamf-mover");

container.addEventListener("mousemove", function (e) {
  mover.style.backgroundPositionX = -e.offsetX * 1.8 + "px";
  mover.style.backgroundPositionY = -e.offsetY + 80 + "px";
});

container.addEventListener("mouseenter", function () {

  setTimeout(function () {
    mover.classList.add("no-more-slidey");
    container.removeEventListener("mouseenter");
  }, 250);

});

CSS代碼

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#666, #222);
}

.module-jamf {
  width: 300px;
  border: 1px solid white;
}

.jamf-container {
  display: block;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.jamf-mover {
  width: 300px;
  height: 300px;
  background: url(s-1.jpg);
  background-size: 800px;
  background-repeat: no-repeat;
  background-position: -30px 40px;
  transform: scale(1);
  transition: background-position 0.25s;
}
.jamf-mover.no-more-slidey {
  transition: none;
}

.interlude {
  background: white;
  padding: 1rem;
  font: 12px "Lato";
}

說明：

.jamf-mover類定義了圖片路徑、初始大小、顯示的位置等屬性。

總結(jié)

本文介紹了純JS+CSS實(shí)現(xiàn)的可移動顯示的圖片背景的效果，代碼量比較少，遷移使用容易，值得收藏。

相關(guān)文章

• 純JS實(shí)現(xiàn)：圖片放大鏡效果
• JavaScript自動等比縮放網(wǎng)頁圖片

標(biāo)簽: 圖片放大鏡  縮放圖片