aniAuto实例demo

2018-03-01 10:57:54来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

这里分析一个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 >    <h1  ani-delay="1s" ani-duration="2s">新上架潮衣</h1>    <ul >        <li  ani-delay="1.5s"  ani-duration="1s"><img src="img/2016081714500329.jpg" /></li>        <li  ani-delay="1.5s"  ani-duration="3s" ><img src="img/2016081714500390.jpg" /></li>        <li  ani-delay="1.5s"  ani-duration="4s"><img src="img/2016081714500391.jpg" /></li>    </ul>    <div >        <button >立即购买</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里做了修改,任然无效

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台