这是一款jQuery感知方向插件制作鼠标悬停图片文字遮罩层跟随鼠标移入移出判断方向动画代码。调用简单方便。这是一款不错的鼠标感知方向效果代码。

使用方法

在页面引入以下jquery.min.js、mouseMoving.js文件

<script src="js/jquery.min.js"></script>
<script src="js/mouseMoving.js"></script>

鼠标移入移出的遮罩层

$('.grid-content').mouseMove('.grid-shade')

HTML结构

<div class="case">
    <ul>
        <li>
            <div class="grid-content">
                <img src="images/a1.png" alt="">
                <div class="grid-shade">
                    <div class="grid-enter">
                        <a href="">information</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="grid-content">
                <img src="images/a2.png" alt="">
                <div class="grid-shade">
                    <div class="grid-enter">
                        <a href="">information</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="grid-content">
                <img src="images/a3.png" alt="">
                <div class="grid-shade">
                    <div class="grid-enter">
                        <a href="">information</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="grid-content">
                <img src="images/a4.png" alt="">
                <div class="grid-shade">
                    <div class="grid-enter">
                        <a href="">information</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="grid-content">
                <img src="images/a5.png" alt="">
                <div class="grid-shade">
                    <div class="grid-enter">
                        <a href="">information</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="grid-content">
                <img src="images/a6.png" alt="">
                <div class="grid-shade">
                    <div class="grid-enter">
                        <a href="">information</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>