javascript - 这个 jQuery "on-mouse-over-scroll-the-image"插件是什么？

Question

我遇到了这个功能

http://themes.leap13.com/wiz/

如果您将鼠标悬停在一个框上，图像将开始在该框内滚动。

这个插件是怎么调用的？有关如何执行此操作的任何代码示例？

Answer 1

这可以在没有任何 jquery 的情况下实现。例如

.screen {
  width: 500px;
  height: 300px;
  display: inline-block;
  margin: 10px;
  padding-top: 12px;
  position: relative;
  margin-bottom: 80px;
  text-decoration: none;
}
.screen div {
  display: inline-block;
  width: 500px;
  height: 300px;
  background-position: center top;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
.screen:hover div {
  background-position: center bottom;
  -webkit-transition: all 10s;
  -moz-transition: all 10s;
  -ms-transition: all 10s;
  -o-transition: all 10s;
  transition: all 10s;
}
.screen h2,
.screen h2 a {
  font-size: 17px;
  color: #fff;
  font-weight: 300;
  position: absolute;
  bottom: -40px;
  text-align: center;
  width: 100%;
}

<div class="screen">
  <div style="background-image:url(http://themes.leap13.com/wiz/wp-content/uploads/2014/10/restaurant-wiz1.jpg);"></div>
  <h2>Some text</h2>
</div>

基本上您所需要的只是一张长图片，然后在其上添加一个过渡，使其在悬停时向上移动(您正在更改背景位置)。

您可以为此添加缓动，悬停延迟，随心所欲:D(在可用的 CSS3 代码 ofc 范围内)。