aniAuto实例demo

来源:互联网 时间:2018-03-01

这里分析一个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里做了修改,任然无效

.

相关阅读:
Top