这里分析一个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
最近有个项目模块需要用到TCP Socket通讯，遇到了一个大坑，所以做了这个Demo。 本Demo主要实现了安卓(Android)TCP 客户端(Client)和服务器(Server)Demo的Socket通讯。以及对接硬件的项目数据在十六进制&&byte&&int...
【Dubbo入门实例Demo】是针对初学者设计的一个实践教程，旨在帮助新手快速理解并掌握Apache Dubbo这一高性能、轻量级的Java RPC框架。在学习过程中，新手往往会在配置、依赖、通信等方面遇到诸多问题，这个Demo就是...
Qt 多线程及简单实例 demo。 多线程的几大特点： 1.多线程的执行顺序无法保证，与操作系统的调度策略和线程优先级等因素有关。 2.多线程的切换可能发生在任何时刻、任何地点。 3.多线程对代码的敏感度高，因此对...
1、Demo演示参见博客：https://blog.csdn.net/ManagerUser/article/details/124892827?spm=1001.2014.3001.5502 2、Demo工程环境VS2019+Qt5.15.2 3、Demo主要作用帮助初学者立马上手
本实例Demo主要展示了如何使用Ajax实现页面的异步交互，提高用户体验。** 1. **基本概念** - **异步通信**：Ajax的核心是JavaScript的XMLHttpRequest对象，它允许浏览器在不刷新整个页面的情况下与服务器进行数据...
orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例
**标题：“完整EF实例demo”** **描述：**这个“完整EF实例demo”是一个全面的实体框架（Entity Framework，简称EF）示例，它涵盖了在实际的企业级项目中经常遇到的各种操作，包括添加、删除、查询和更新数据。这个...
在Android开发领域，实例Demo是学习和掌握技术的关键途径。"Android实例Demo集合"这个压缩包文件显然包含了一系列用于教学和实践的Android项目，旨在帮助开发者深入理解Android平台的工作原理和开发技巧。以下是对...
这个名为“微服务实例demo”的项目，旨在提供一个实践微服务的示例，帮助学习者理解和掌握微服务的核心概念和技术栈。它包含了一套完整的微服务解决方案，非常适合初学者和有经验的开发者进行学习和参考。 在微服务...
在这个“工厂方法模式java实例demo”中，我们可以期待看到如何在实际代码中应用这一模式。 在刘伟老师的《设计模式》一书中，他可能通过一个具体的示例解释了工厂方法模式的概念。这个例子可能涉及创建不同类型的...
bootdo开发框架下整合腾讯地图实例demo；本demo中包括区域地址选择，并填写详细地址后获取当前地址坐标，也可手动修改坐标值根据地图现在可在地图中点击获取坐标值。 注意：本demo基于bootdo 2.0 框架下进行的二次...
在“JNA调用DLL完整实例demo”中，我们首先需要创建一个Java接口，这个接口将代表DLL中的函数。例如，如果DLL中有一个名为`recvWork`的函数，我们的Java接口可能会这样定义： ```java public interface ...
在这个“Echarts开发实例Demo”中，我们可以深入学习ECharts的使用方法和技巧。首先，我们要了解ECharts的基本结构，通常包括以下几个步骤： 1. 引入ECharts库：在HTML文件中通过 `<script>` 标签引入 echarts.min....
压缩包中是6个实例demo,包括MVC,MVC的变种,MVP,MVP_login(实际开发中的使用),MVVM,FBKVO;demo对应着简书文章:https://www.jianshu.com/p/dc353e332b0e,如果你没有积分下载,也可以去简书给我留言,可以给你发
**Orika Java实例Demo** Orika是一个高性能、易用的Java Bean到Bean映射库，它简化了对象之间的数据转换过程。在这个实例Demo中，我们将深入理解Orika的工作原理，以及如何在Java项目中有效地使用它进行对象拷贝。 ...
百度API实例DEMO是百度为开发者提供的一个移动端应用开发示例，主要针对Android平台，用于帮助开发者更好地理解和使用百度开放的各类服务接口。这个DEMO包含了大量的代码示例，覆盖了百度地图SDK、定位SDK、路线规划...
C#事件与委托实例Demo源代码，C#2008的事件与委托案例Demo源代码，该压缩包中包含2个.doc文档,讲解事件与委托的基础知识;一个C# 中的委托和事件.pdf参考文章;2项目Demo的源代码.新手可以下载学习学习，程序简单，...
这个"EXT多实例Demo"显然是一个教学资源，适合初学者快速上手EXT库的使用。 1. **EXT简介** EXT JS提供了一套完整的组件模型，包括表格、树、表单、面板、菜单等，它使用MVC（Model-View-Controller）架构，使得...