aniAuto实例demo

这里分析一个aniAuto插件的实例demo，直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详解demo</title>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/aniAuto.min.js"></script>
    <style type="text/css">
        .con-ter{
            color:#E67E22;
            width: 100%;
            height: 100%;
            background-color: papayawhip;
            text-align: center;
            overflow: hidden;
        }
        .list-li{
            width: 1000px;
            margin: auto;
            list-style: none;
            overflow: hidden;
        }
        .list-li li{
            width: 300px;
            float: left;
            margin-left: 30px;
            height:400px;

        }
        .list-li li img
        {
            height: 100%;
        }
        .lt
        {
            margin:30px auto 20px auto;
            text-align: center;
        }
        .sil-btn
        {
            border: none;
            background: #E67E22;
            width: 200px;
            height: 35px;
            line-height: 35px;
            border-radius: 9px;
            color:#ffffff;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="con-ter slideInUp animated">
    <h1 class="bounceIn ani-auto" ani-delay="1s" ani-duration="2s">新上架潮衣</h1>
    <ul class="list-li">
        <li class="zoomInLeft ani-auto" ani-delay="1.5s"  ani-duration="1s"><img src="img/2016081714500329.jpg" /></li>
        <li class="zoomInUp ani-auto" ani-delay="1.5s"  ani-duration="3s" ><img src="img/2016081714500390.jpg" /></li>
        <li class="zoomInRight ani-auto" ani-delay="1.5s"  ani-duration="4s"><img src="img/2016081714500391.jpg" /></li>
    </ul>
    <div class="lt">
        <button class="sil-btn">立即购买</button>
    </div>
</div>
<script>
    $(document).ready(function () {
        $.aniAuto();
    });
</script>
</body>
</html>

代码解析：

之所以会有

ani-delay="1s" ani-duration="2s"

我们查看aniAuto.js源码就会发现

 if ($item.attr('ani-duration')) {
                duration = $item.attr('ani-duration');
                $item.css({
                    'animation-duration': duration,
                    '-webkit-animation-duration': duration,
                    '-ms-animation-duration': duration,
                    '-woz-animation-duration': duration
                });
}

这里给标签动态添加属性，其优先级为内联样式>内部样式表>外部样式表

所以即使你在css里做了修改，任然无效

猜你喜欢