这里分析一个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里做了修改，任然无效
.
相关推荐
这些app的实例如我博客说的那样都是我已经运行成功的实例，每一个app的demo在我的博客里面需要哪些功能参考哪个demo都有介绍。此文地址：https://blog.csdn.net/qq_41647999/article/details/84844357
小型数据库基本操作实例DEMO 小型数据库基本操作实例DEMO 小型数据库基本操作实例DEMO 小型数据库基本操作实例DEMO 小型数据库基本操作实例DEMO 小型数据库基本操作实例DEMO 小型数据库基本操作实例DEMO
Spring3实例Demo旨在提供一个全面理解并实践Spring框架核心功能的平台。Spring是Java领域中最受欢迎的轻量级框架之一，它通过依赖注入（DI）和面向切面编程（AOP）来简化企业级应用的开发。在这个实例Demo中，我们将...
【Dubbo入门实例Demo】是针对初学者设计的一个实践教程，旨在帮助新手快速理解并掌握Apache Dubbo这一高性能、轻量级的Java RPC框架。在学习过程中，新手往往会在配置、依赖、通信等方面遇到诸多问题，这个Demo就是...
Qt 多线程及简单实例 demo。 多线程的几大特点： 1.多线程的执行顺序无法保证，与操作系统的调度策略和线程优先级等因素有关。 2.多线程的切换可能发生在任何时刻、任何地点。 3.多线程对代码的敏感度高，因此对...
在"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"就是这样一个示例，它可能是通过编程语言实现的一个小型项目，用于演示如何在代码中实现图片的随机选取和显示功能。 首先，我们要理解这个实例的核心技术点：随机数生成和文件操作。...
orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例
**标题：“完整EF实例demo”** **描述：**这个“完整EF实例demo”是一个全面的实体框架（Entity Framework，简称EF）示例，它涵盖了在实际的企业级项目中经常遇到的各种操作，包括添加、删除、查询和更新数据。这个...
在Android开发领域，实例Demo是学习和掌握技术的关键途径。"Android实例Demo集合"这个压缩包文件显然包含了一系列用于教学和实践的Android项目，旨在帮助开发者深入理解Android平台的工作原理和开发技巧。以下是对...
【标题】：“webService调用实例 Demo” 在IT行业中，Web Service是一种常见的应用程序接口（API）形式，它允许不同系统间的交互，无论它们是用何种编程语言或运行在何种操作系统上。本“webService调用实例 Demo”...
bootdo开发框架下整合腾讯地图实例demo；本demo中包括区域地址选择，并填写详细地址后获取当前地址坐标，也可手动修改坐标值根据地图现在可在地图中点击获取坐标值。 注意：本demo基于bootdo 2.0 框架下进行的二次...
1.扩展DATAGRIDVIEW实现多维表头及合计栏 2.扩展DataGridViewDataProcessCell（带图片的百分比功能） ...集成很多优秀扩展，自己再写了个demo，所以要个10分不过分吧！我自己找这些源码都用了50-60分了 呵呵！
SSM整合实例demo
在这个"springcloud实例demo"中，我们将主要关注Eureka服务发现组件。 Eureka是SpringCloud的核心组件之一，主要用于实现服务注册与发现。在微服务架构中，每个服务都是独立的，Eureka就像是服务之间的通讯目录，它...
在"Kindeditor 富文本编辑器实例Demo"中，我们主要会遇到以下关键知识点： 1. **富文本编辑器的基本概念**：富文本编辑器不同于简单的纯文本编辑器，它可以处理格式化的文本，包括字体、字号、颜色、对齐方式、列表...
cJSON的完整使用实例demo,解压即可编译使用，运行环境linux.
这里，我们主要关注"事件"和"委托"的实例演示，特别是通过"C#事件与委托实例Demo源代码"来深入理解这两个概念。 首先，我们需要了解什么是委托。在C#中，委托是一种类型，它类似于函数指针，可以引用方法。委托允许...
在这个“Echarts开发实例Demo”中，我们可以深入学习ECharts的使用方法和技巧。首先，我们要了解ECharts的基本结构，通常包括以下几个步骤： 1. 引入ECharts库：在HTML文件中通过 `<script>` 标签引入 echarts.min....