jquery根据鼠标移动方向控制动画方向-html代码-BFW代码库

jquery根据鼠标移动方向控制动画方向

代码语言：html

所属分类：悬停

代码描述：jquery根据鼠标移动方向控制动画方向

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <style>
        .indThr {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .kcList {
            width: 18.8rem;
            height: 100%;
            margin: 0 auto;
        }

        .picList {
            width: 100%;
            height: 4.56rem;
            margin: 0;
            padding: 0;
        }

        .picList li {
            width: 32.66%;
            height: 100%;
            float: left;
            margin-right: 1%;
            overflow: hidden;
            margin-bottom: 1%;
        }

        .picList li:nth-child(3n) {
            margin-right: 0;
        }

        .meng {
            width: 100%;
            height: 100%;
            display: block;
        }

        .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-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: .8;
            filter: alpha(opacity=80);
            text-align: center;
            line-height: 4.56rem;
            font-size: 0.6rem;
            color: #fff;
            font-family: "Medium";
        }

        .da-thumbs li a div.da-animate {
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

        .da-slideFromTop {
            left: 0;
            top: -100%
        }

        .da-slideFromBottom {
            left: 0;
            top: 100%
        }

        .da-slideFromLeft {
            top: 0;
            left: -100%
        }

        .da-slideFromRight {
            top: 0;
            left: 100%
        }

        .da-slideTop {
            top: 0
        }

        .da-slideLeft {
            left: 0
        }

        .picImg {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="indThr">
        <div class="kcList">
            <ul class="picList da-thumbs" id="da-thumbs">
                <li>
                    <a href="#">
                        <img src="http://repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" class="picImg" />
                        <div class="picHover">
                            MAPLE
                        </div>
                        <p class="picBo">
                            MAPLE
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" class="picImg" />
                    <div  class="picHover">
                        BIRCH
                    </div>
                    <p class="picBo">
                        BIRCH
                    </p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" class="picImg" />
                    <div class="picHover">
                        BLACK WALNUT
                    </div>
                    <p class="picBo">
                        BLACK WALNUT
                    </p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" class="picImg" />
                    <div class="picHover">
                        OLIVE
                    </div>
                    <p class="picBo" style="background-image: url('static/images/15.png');">
                        OLIVE
                    </p>
                </a>
            </li>
            <li>
                <a href=.........完整代码请登录后点击上方下载按钮下载查看