这里分析一个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里做了修改，任然无效
.
相关推荐
最近有个项目模块需要用到TCP Socket通讯，遇到了一个大坑，所以做了这个Demo。 本Demo主要实现了安卓(Android)TCP 客户端(Client)和服务器(Server)Demo的Socket通讯。以及对接硬件的项目数据在十六进制&&byte&&int...
【Dubbo入门实例Demo】是针对初学者设计的一个实践教程，旨在帮助新手快速理解并掌握Apache Dubbo这一高性能、轻量级的Java RPC框架。在学习过程中，新手往往会在配置、依赖、通信等方面遇到诸多问题，这个Demo就是...
Qt 多线程及简单实例 demo。 多线程的几大特点： 1.多线程的执行顺序无法保证，与操作系统的调度策略和线程优先级等因素有关。 2.多线程的切换可能发生在任何时刻、任何地点。 3.多线程对代码的敏感度高，因此对...
这个“很简洁的ssh框架实例demo”提供了一个基础的SSH项目模板，适合初学者快速理解和上手SSH框架。 1. **Struts2**：作为控制层，负责处理HTTP请求，执行业务逻辑，并将结果转发到相应的视图。Struts2提供了强大的...
在"Ext4+SpringMVC实例Demo源码"中，我们可以期待看到如何将这两个技术结合，创建一个具有交互性和数据管理功能的Web应用。这个Demo可能包含了以下关键知识点： 1. **Ext4组件使用**：Ext4提供了一系列的UI组件，如...
1、Demo演示参见博客：https://blog.csdn.net/ManagerUser/article/details/124892827?spm=1001.2014.3001.5502 2、Demo工程环境VS2019+Qt5.15.2 3、Demo主要作用帮助初学者立马上手
这个"图片随机显示实例DEMO"就是这样一个示例，它可能是通过编程语言实现的一个小型项目，用于演示如何在代码中实现图片的随机选取和显示功能。 首先，我们要理解这个实例的核心技术点：随机数生成和文件操作。...
本实例Demo主要展示了如何使用Ajax实现页面的异步交互，提高用户体验。** 1. **基本概念** - **异步通信**：Ajax的核心是JavaScript的XMLHttpRequest对象，它允许浏览器在不刷新整个页面的情况下与服务器进行数据...
orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例
在Android开发领域，实例Demo是学习和掌握技术的关键途径。"Android实例Demo集合"这个压缩包文件显然包含了一系列用于教学和实践的Android项目，旨在帮助开发者深入理解Android平台的工作原理和开发技巧。以下是对...
**标题：“完整EF实例demo”** **描述：**这个“完整EF实例demo”是一个全面的实体框架（Entity Framework，简称EF）示例，它涵盖了在实际的企业级项目中经常遇到的各种操作，包括添加、删除、查询和更新数据。这个...
在这个“自己实现ioc实例demo”中，我们将探讨如何通过XPath解析XML文件来实现这一功能。 首先，让我们了解什么是依赖注入。在传统的编程中，一个类通常会自行创建它需要的对象，这导致了类与对象的紧密耦合。而在...
SSM整合实例demo
在"Kindeditor 富文本编辑器实例Demo"中，我们主要会遇到以下关键知识点： 1. **富文本编辑器的基本概念**：富文本编辑器不同于简单的纯文本编辑器，它可以处理格式化的文本，包括字体、字号、颜色、对齐方式、列表...
这里，我们主要关注"事件"和"委托"的实例演示，特别是通过"C#事件与委托实例Demo源代码"来深入理解这两个概念。 首先，我们需要了解什么是委托。在C#中，委托是一种类型，它类似于函数指针，可以引用方法。委托允许...
在“JNA调用DLL完整实例demo”中，我们首先需要创建一个Java接口，这个接口将代表DLL中的函数。例如，如果DLL中有一个名为`recvWork`的函数，我们的Java接口可能会这样定义： ```java public interface ...
cJSON的完整使用实例demo,解压即可编译使用，运行环境linux.
压缩包中是6个实例demo,包括MVC,MVC的变种,MVP,MVP_login(实际开发中的使用),MVVM,FBKVO;demo对应着简书文章:https://www.jianshu.com/p/dc353e332b0e,如果你没有积分下载,也可以去简书给我留言,可以给你发
"普元EOS 实例Demo -- Primeton NUI Demo" 是一个专为初学者设计的教程，旨在帮助用户快速上手普元EOS平台的使用。普元EOS，全称为Primeton Enterprise Service Oriented Operating System，是一个面向服务的企业级...
Block不仅可以作为局部变量、函数参数，还可以用于回调，这正是"IOS block回调代码实例Demo"所展示的核心概念。在这个Demo中，我们将深入探讨Block在iOS应用程序中的使用方式，特别是如何利用它们来实现回调机制。 ...