jqury动画，循环
一。动画
效果就是定义一个小盒子，让这个小盒子以动画的形式变化尺寸，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 动画</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){ /*
参数：
1、属性设置{param1: value1, param2: value2}
2、speed 时间 ms
3、swing 默认值 开始和结束慢速，中间快速 linear 匀速
4、回调函数
*/ $('#div1').animate({width:200,height:200},1000,function(){ //首先把盒子尺寸变大至200,1秒内完成
alert('动画完了！');
$(this).animate({marginLeft:500},1000,function(){ //然后盒子右移500px $(this).animate({marginTop:500},1000); //最后盒子下移500px
});
}); }) </script>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color: gold;
} </style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
二. 循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){ //$('.list li').html('111');
//$('.list li').css({background:'gold'}); $('.list li').each(function(index){
//index 是索引值
$(this).html(index);
})
}) </script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
jqury动画，循环的更多相关文章
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 微信小程序——实现动画循环播放
今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...
- Android实现动画循环的方式
每次想到循环播放.重复执行时,脑海中总是冒出在while(true)的实现方式. Thread thread = new Thread(new Runnable(){ public void run( ...
- egret的tween动画循环播放
开发中发现了egret的自带tween动画中tweenGroup没有自动重新播放的代码,就使用了一种较笨的方法进行播放 比如:我在exml皮肤文件中写了一个动画组tweenGroup,并且在ts文件中 ...
- 使用swiper.animate时，给一个对象添加两个动画且动画循环的方法
swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...
- 怎样使android的view动画循环弹动
在res中建立文件夹anim,分别写下cycles.xml,shake1.xml,shake2.xml cycles.xml: <?xml version="1.0" enc ...
- 写多个物件css3循环动画案例原理
div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...
- 【Visual C++】游戏编程学习笔记之六：多背景循环动画
本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...
- CSS3 animation动画，循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...
随机推荐
- siebel简介
定义公司架构.描述S应用架构.安装应用.配置S.自动化的业务规则.数据整合.不同环境如何整合. 一.介绍CRM 销售.Callcenter等 允许管理客户和联系人. 二.Using the web c ...
- 【SPOJ - LCS2】Longest Common Substring II【SAM】
题意 求出多个串的最长公共子串. 分析 刚学SAM想做这个题的话最好先去做一下那道codevs3160.求两个串的LCS应该怎么求?把一个串s1建自动机,然后跑另一个串s2,然后找出s2每个前缀的最长 ...
- 修改 cmd 控制台字体、巧用 FontLink 使中英文独立设置
众所周知,Windows 中 cmd 控制台窗口的字体难看,但是修改注册表是可以实现修改其字体的,但很多很棒的编程字体是没有中文的,所以在显示中文时直接调用了宋体,这绝妙的反差实在是 不忍直视.但是, ...
- int类型与char类型的转换
---------siwuxie095 Java对char类型的数据在底层是按int类型来处理的 (只是显示出来仍然是字符型) 1.int类型与char ...
- H5（1）
css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
- Tensorflow CIFAR10 (二分类)
数据的下载: (共有三个版本:python,matlab,binary version 适用于C语言) http://www.cs.toronto.edu/~kriz/cifar-10-python. ...
- Python学习笔记_读Excel去重
读取一个Excel文件,按照某列关键字,如果有重复则去掉 这里不介绍所有的解决办法,只是列出一个办法. 软件环境: OS:Win10 64位 Python 3.7 测试路径:D:\Work\Pytho ...
- 1.spring.net Look-up Method 查找方法的注入（方法是抽象的需要spring.net注入）
.为什么需要查找方法的注入 当Object依赖另一个生命周期不同的Object,尤其是当singleton依赖一个non-singleton时,常会遇到不少问题,Lookup Method Injec ...
- BCompare 4重置试用天数
BCompare安装后有30天试用期,试用结束后,你可以卸载重装,以重新获得30天试用天数. BCompare的使用天数记录保存在注册表中,如果不想每次重装,也可删除对应的注册表值来重置激活天数. 命 ...
- [原创]SOUI GDI+渲染引擎下的字体特效，抛砖引玉
由于SOUI是一种双渲染引擎的DUI库,默认在SKIA渲染引擎下是支持特效字体的,具体请参考DEMO中的源码. 但是使用GDI+渲染时是没有这些特效的,着实比较苦恼,此代抛砖引玉,细节实现 请自己再去 ...