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

I came across this functionality

我遇到了这个功能

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

where if you hover the mouse over a box, the image will start scrolling within that box.

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

How does this plugin is called? Any code examples on how to do it?

这个插件是如何调用的?关于如何做的任何代码示例?

1 个解决方案

#1

This can be achieved without any jquery. For instance

这可以在没有任何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>

Basically all you need is a long image, and you add a transition on it to make it move up on hover (you're changing background position).

基本上你需要的只是一个长图像,并在其上添加一个过渡以使其在悬停时向上移动(你正在改变背景位置)。

You could add easing to this, delay on hover, what ever your heart desires :D (within the realm of available CSS3 code ofc).

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

#1