Question

我想尝试使用jquery或javascript实现交互式效果。我们的想法是拥有一个大型背景图片，其中包含有关商家的不同文字。此背景图像将变暗，但鼠标悬停将像光一样显示鼠标光标周围的已定义区域。

我不确定我是否在正确的轨道上，但我的一般想法是在背景图像前面有一个完全不透明的图像，其不透明度设置为1.在鼠标悬停时，不透明度图像的大小将在鼠标悬停的定义半径内发生变化。

有谁能告诉我如何实现这个目标？

非常感谢

Answer 1

一个更好的解决方案是在简单的CSS中完成，而不添加任何javascript，因此您只需添加一个类并使用所有图像执行此操作，例如：

CaseNo

Answer 2

查看此fiddle。

背后的诀窍是rem。

以下是摘录。

＆＃13;

$(document).ready(function() {
  var $magic = $(".magic"),
    magicWHalf = $magic.width() / 2;
  $(document).on("mousemove", function(e) {
    $magic.css({
      "left": e.pageX - magicWHalf,
      "top": e.pageY - magicWHalf
    });
  });
});

＆＃13;

html,
body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
}
.scene {
  position: relative;
  height: 100%;
  background: #1d1f20;
  padding: 20rem;
  text-align: center;
}
h1 {
  position: relative;
  font-size: 8rem;
  text-transform: uppercase;
  color: #fff;
  z-index: 10;
}
.magic {
  z-index: 5;
  position: absolute;
  top: calc(50% - 10rem);
  left: calc(50% - 10rem);
  width: 20rem;
  height: 20rem;
  background: url("http://beautifulphotos.atguru.in/beautifulimages/30-beautiful-peacocks/beautiful-peacocks-11.jpg") 50% 50% no-repeat fixed;
  background-size: cover;
  border-radius: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scene">
  <h1>TEXT HERE</h1>
  <div class="magic"></div>
</div>

＆＃13;

希望它有所帮助。

在悬停时显示部分图像

2 个答案: