什么是这个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的范围内).