jQuery应用实例2：简单动画
效果：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript " src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
*{padding: 0px;margin: 20px;}
li{
width: 250px;height:300px;
float: left;background-color:#e60;
list-style: none;
transition:width 1s;/*<!--过渡-->*/
}
@keyframes myself{
0%{background:orange;}/*从0%到100%发生了什么*/
25%{background:red;}
50%{background:gray;}
100%{background:blue;transform:translate(100px,100px);}
}
.donghua{
animation:myself 3s;}
li:hover{
transform:translate(10px,10px),width:200px;}/*translate是平移，ralate是旋转*/
</style>
</head> <body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> </body>
<script>
$(function(){
$("li").click(function(){
var $x=$(this);
var $y=$x.index();
$x.addClass("donghua");
//如果不移除样式，运行一遍后将没有反应，因为它们已经被赋予样式了
setTimeout(function(){$x.removeClass("donghua");},3000);
/*
$("li").eq($y).addClass("donghua");//$x和$("li").eq($y)效果一样
setTimeout(function(){$("li").eq($y).removeClass("donghua");},3000);
*/ })
}) </script>
</html>
:eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。
jQuery应用实例2：简单动画的更多相关文章
- 【Demo】jQuery 轮播图简单动画效果
功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...
- jquery添加光棒效果的各种方式以及简单动画复杂动画
过滤器.绑定事件.动画 一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- jquery翻页turnjs简单实例
jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...
- JQuery 基本使用、操作样式、简单动画
JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ ...
- 【jQuery小实例】---2自定义动画
---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...
- jQuery中自定义简单动画的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
随机推荐
- NEFU 116 两仪剑法 【求最小公倍数】
题目链接:http://acm.nefu.edu.cn/JudgeOnline/status.php?problem_id=116&order=1 解题思路:求最小公倍数 #include&l ...
- mysql组复制集群简介
mysql组复制集群拓扑: 环境: centos6.5 mysql5.7.19 一.组复制搭建: 配置hosts文件 再三台服务器上分别启动一个mysql实例,共三个. 参考配置文件如下: serve ...
- 【转】【Oracle 集群】Oracle 11G RAC教程之集群安装（七)
原文地址:http://www.cnblogs.com/baiboy/p/orc7.html 阅读目录 目录 集群安装 参考文献 相关文章 Oracle 11G RAC集群安装(七) 概述:写下本文档 ...
- 匈牙利&&EK算法(写给自己看)
(写给自己看)匈牙利算法(最大匹配)和KM算法(最佳匹配) 匈牙利算法 思想 不断寻找增广路,每次寻得增广路,交换匹配边和非匹配边,则匹配点数+1 这里增广路含义:交错路,即从未匹配点出发经过未匹配边 ...
- 莫烦大大TensorFlow学习笔记（8）----优化器
一.TensorFlow中的优化器 tf.train.GradientDescentOptimizer:梯度下降算法 tf.train.AdadeltaOptimizer tf.train.Adagr ...
- Project Euler 18 Maximum path sum I（ DP and 记忆化搜索 ）
题意:求从三角形顶端出发到达底部,所能够得到的最大路径和 方法一:记忆化搜索 /************************************************************ ...
- mysql开发之---每日一得01
2015年7月7日------------------------- 1.truncate表会清空建表语句auto_increment的值:某个表的id即是主键也是自增,你能够选择插入随意id值,假设 ...
- bram和dram差别
选择distributed memory generator和block memorygenerator标准: Dram和bram差别: 1.bram 的输出须要时钟,dram在给出地址后既可输出数据 ...
- [MFC]透明图展示
(Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu 转载请标明来源) 一般我们可见的图形RGB三元色.对Alpha通道的话.它不一定会显示到窗口中来. 在Wi ...
- AS常见的错误
导入的项目使用的gradle版本和本地的要一致,不然会提示类似"Minimum supported Gradle version is 3.3. Current version is 2.1 ...