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-an.........完整代码请登录后点击上方下载按钮下载查看

网友评论0