jQuery动画效果实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画特效</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style>
div{
position:absolute;
top:50px;
left:200px;
height:50px;
width:50px;
border:1px solid red;
}
</style>
</head>
<body>
<div></div>
<input id="leftmove" type="button" value="左移"/>
<input id="rightmove" type="button" value="右移"/>
<script type="text/javascript">
$(function(){
$ltime=;
$rtime=;
$("#leftmove").bind("click",function(){//绑定元素事件
$ltime++;
$("div").animate({//调用animate制作移动动画
left:'-=50px'
},,function(){
$("div").html("左移"+$ltime+"次!");
});
});
$("#rightmove").bind("click",function(){
$rtime++;
$("div").animate({
left:'+=50px'
},,function(){
$("div").html("右移"+$rtime+"次!");
});
});
});
</script>
</body>
</html>
jQuery动画效果实现的更多相关文章
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...
- jquery 动画效果插件
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- 40个超酷的jQuery动画效果教程
自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...
- jquery动画效果中，避免持续反应用户的连续点击
一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...
- jQuery自学笔记（三）：jQuery动画效果
jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...
- 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏
jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...
随机推荐
- Grunt 构建SeaJS
GitHub地址:https://github.com/MrLeo/SeaJS 目录结构 目录结构说明 web存放HTML文件 static存放所有HTML需要用到静态资源文件(css.js.img- ...
- delphi下，不错的多语言翻译组件
http://yktoo.com/en/software/dklangTraned http://sourceforge.net/projects/dklang/
- hdu 5690 2016"百度之星" - 初赛（Astar Round2A） All X 快速二次幂 || 寻找周期
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5690 题意:m个数字全为x mod k ?= c;其中m <= 1010,0 < c,k ...
- zendframework 事件管理（二）
首先需要明确的几个问题: Q1.什么是事件? A:事件就是一个有名字的行为.当这个行为发生的时候,称这个事件被触发. Q2.监听器又是什么? A:监听器决定了事件的逻辑表达,由事件触发.监听器和事件往 ...
- 学C++之感悟
程序设计真的就这么难得入门啊 最要命的事情就是看那些看不懂的书.断断续续地看C++Primer好几天了,还是一点眉目都没有,稀里糊涂的.看得头疼了用Google找过来人留下的东西看,无意中发现了一篇自 ...
- redis使用场景
Redis应用场景 Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作 ...
- EF中使用Select new 方法中字段值替换的问题
前提需要替换查询得到的List当中的某个字段的值,替换规则有一个mapping关系 尝试代码 有问题 无法获取任何数据 /// <summary> /// 获取Treegrid的List ...
- Scene (场景视图) 详解
控制二维切换的按钮 点击2D按钮可以激活2D模式.这个按钮会将场景相机在透视视图和正交投影视图之间进行切换.当观察透视视图时,远离相机的物体看起来更小:然而,当正交投影视图的时候,物体的大小并不受相机 ...
- 【学习总结】iOS 数据保存几种方式总结
在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍一下数据保存的方式: NSKeyedAr ...
- 【转】java获取当前路径的几种方法
1.利用System.getProperty()函数获取当前路径: System.out.println(System.getProperty("user.dir"));//use ...