Question

我正在尝试为网站添加视觉效果，并且我遇到了this惊人的效果：颜色叠加层朝着鼠标的方向滑动（如果它来自右侧，那么覆盖..）

我完全不知道如何做到这一点，所以我不是要求你完全详细说明这个效果，但是，如果可以的话，一般地解释如何通过鼠标移动来影响效果？

我所谈论的那种效果的另一个例子是this one。

非常感谢：）

Answer 1

关于它的来源文章：LINK

Gitlab JS解决方案：LINK

所以基本上如果你有结构，来自文章：

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="images/7.jpg" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>

你应该使用CSS：

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

然后传递给jQuery（包含在github包之前（上面的链接）：hoverdir）：

$('#da-thumbs > li').hoverdir();

它会为你做的一切：）

如何将效果链接到鼠标方向

1 个答案: