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文档操作.事件处理.动画 ...
随机推荐
- 《Apache负载均衡》RHEL6
Apache负载均衡的搭建,基于上篇<CDN web加速代理>搭建好的服务器,我们来搭建apache负载均衡: Apahe负载均衡:就是为了缓解一台服务器的压力而多台服务器配合使用. 基于 ...
- Ubuntu搜狗输入法的使用
下载搜狗拼音输入法安装包 删除ibus,确认没有以ibus开头的包存在 sudo dpkg -P ibus ibus-gtk ibus-gtk3 ibus-pinyin ibus-pinyin-db- ...
- js设计模式（8）---享元模式
0.前言 今天总结了四种设计模式,到现在有点精疲力尽了,但是还是有不少收获,很开心自己有掌握了新的东西,今天变得有了价值. 1.使用条件 1.1.网页中使用了大量资源密集型的对象: 1.2.这些对象中 ...
- printf的格式控制的完整格式
printf的格式控制的完整格式:% - 0 m.n l或h 格式字符下面对组成格式说明的各项加以说明:①%:表示格式说明的起始符号,不可缺少.②-:有-表示左对齐输出,如省略表示右对齐输出 ...
- IDEA操作GIT说明
公司的代码库从TFS升级到了GIT,我们的自动化测试代码就需要迁移到git上.操作如下: 1.安装GIT 安装完成后,在IDEA中配置git安装路径 2.在本地磁盘新建一个空目录,例如:D:\Wo ...
- opencv的初体验
http://guoming.me/opencv-config 这篇文章有讲解opencv的安装与配置 一些常用库 opencv_core249d.lib opencv_imgproc249d.li ...
- BI的核心价值[转]
BI的核心价值是辅助决策,从一个洁净的数据源中自动提取有价值的数据进行分析,从而成为重要商业决定的决策基础.但在国内,洁净的数据源不易得到,很多情况下都需要进行数据清洗,所以BI的应用受到很大程度的抑 ...
- AVG()和to_date()函数的使用
1.一道关于AVG函数和NULL值的面试题 某部门有10个员工,其中9个工资为1000,另一个为NULL,当使用AVG函数取该部门平均工资时,结果应该是多少? A.1000 B.900 我这里把题目再 ...
- VS2010性能监视工具
<编程珠玑(续)>第一章中就介绍了性能监视工具,对于较简单的程序来说,性能监视工具其实可以用变量累加来计算的,但是对于较复杂的程序来说就需要比较好的性能监视工具了.而VS2010提供了一个 ...
- 进程和cpu绑定
#include<stdlib.h> #include<stdio.h> #include<sys/types.h> #include<sys/sysinfo ...