JQuer.HoverDir的基本使用方法:解决modernizr报错问题-白红宇的个人博客

发布日期：2021-05-04 20:18:23 浏览次数：44 分类：原创文章

本文共 3626 字，大约阅读时间需要 12 分钟。

遇到一个需要根据鼠标进入和移出方向，来判断遮罩层动画的，做完总结一下。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title></title>    <style>        .da-thumbs {                width: 1000px;            list-style: none;            position: relative;            margin: 0 auto;            padding: 0;        }                .da-thumbs li {                float: left;            margin: 5px;            width: 30%;            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;            width: 100%;            height: 100%;            border-radius: 5px;            -webkit-border-radius: 5px;            -moz-border-radius: 5px;            -o-border-radius: 5px;            -ms-border-radius: 5px;        }                .da-thumbs li a {                overflow: hidden;            transition: 0.5s all ease;            -webkit-transition: 0.5s all ease;            -moz-transition: 0.5s all ease;            -o-transition: 0.5s all ease;            -ms-transition: 0.5s all ease;        }                .da-thumbs li a div {                position: absolute;            background: rgba(75, 75, 75, 0.7);            width: 100%;            height: 100%;        }        /* animate */                .da-thumbs li a div.da-animate {                -webkit-transition: all 0.3s ease;            -moz-transition: all 0.3s ease-in-out;            -o-transition: all 0.3s ease-in-out;            -ms-transition: all 0.3s ease-in-out;            transition: all 0.3s ease-in-out;        }        /* 动画开始阶段的class */                .da-slideFromTop {                left: 0px;            top: -100%;        }                .da-slideFromBottom {                left: 0px;            top: 100%;        }                .da-slideFromLeft {                top: 0px;            left: -100%;        }                .da-slideFromRight {                top: 0px;            left: 100%;        }        /* 动画结果阶段的class: */                .da-slideTop {                top: 0px;        }                .da-slideLeft {                left: 0px;        }    </style></head><body>    <ul id="da-thumbs" class="da-thumbs">        <li>            <a href="#" rel="title" class="b-link-stripe b-animate-go  thickbox">                <img src="images/1.jpg" alt="" width="113" height="113">                <div><span>简介</span></div>            </a>        </li>        <li>            <a href="#">                <img src="images/g-11.jpg" alt="" width="113" height="113">                <div><span>简介</span></div>            </a>        </li>    </ul>    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <script type="text/javascript" src="js/modernizr.custom.97074.js"></script>    <script type="text/javascript" src="js/jquery.hoverdir.js"></script>    <script type="text/javascript">        $(function() {                $(' #da-thumbs > li ').each(function() {                    $(this).hoverdir();            });        });            </script></body></html>

** modernizr.custom.97074.js必须加上，否则会报错“Modernizr is not defined”
** 该插件支持动画效果，延迟动画效果，和反向

$('#da-thumbs > li').hoverdir( {      hoverDelay : 50,   reverse : true   });

** hoverDelay是延迟加载时间，越大时间越长。reverse是是否反向，true表示反向，默认false

该脚本监视鼠标光标悬停该项目的方向。在这些情况下的类的in-top，in-right，in-bottom或in-left加入到悬停的项目。
在鼠标光标的情况下离开该项目时，类离去方向被施加在物品上（out-top，out-right，out-bottom或out-left）。

必须文件：（加载顺序不可以乱）

jquery-1.8.3.min.js
不想去搜索下载，本站已贴心上传modernizr和hoverdir文件，直接点击即可跳转到下载页。

上一篇：Promise的底层详解、应用及扩展

下一篇：数据类型转换的核心方法

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章