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文档操作.事件处理.动画 ...
随机推荐
- win7 php5.5 apache 源码安装 imagick扩展
最近公司项目有用到php 的imagick,折腾了好长时间才把扩展装上,最主要的就是最新的不一定是最合适的,最开始一直找最新包安装,一直都不成功,经过google了好长时间,终于找到一个有用的,灵机一 ...
- css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题
首先说下开发模式,刚刚开始接触,基本沿用web端开发方式,目前开发模式上没有找到的适合的,现在基本这样:1,电脑nginx配置服务器3,电脑和手机连同一个局域网,2,android root 和 ip ...
- 通信协议之HTTP，UDP，TCP协议
1.UDP,TCP,HTTP之间的关系 tcp/ip是个协议组,它可以分为4个层次,即网路接口层,网络层,传输层,以及应用层, 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协 ...
- php威盾解密的例子分享
例子,批量解密 代码如下 复制代码 <?php/************************************威盾PHP加密专家解密算法 By:zhrt*http://www.111 ...
- 《PHP和MySQL Web开发》精彩的地方收录
1.用SESSION来做的购物车,做成数组,用isbn对应书的数量作为二维数组保存 $new GET传值加入购物车,submit是修改数量,提交后的表单,通过历遍原来的数组,对应isbn修改最新的数量 ...
- WPF 系统托盘 图标闪烁
WPF消息通知 系统托盘,图标闪烁 using System.Windows.Forms; using System.Windows.Threading; public partial class W ...
- ORACLE 11G R2 修改"用户名"
SQL> create pfile from spfile; 修改pfile文件,添加隐含参数 *._enable_rename_user='TRUE',将数据库以restrict方式启动 1. ...
- 在Linux下写一个简单的驱动程序
本文首先描述了一个可以实际测试运行的驱动实例,然后由此去讨论Linux下驱动模板的要素,以及Linux上应用程序到驱动的执行过程.相信这样由浅入深.由具体实例到抽象理论的描述更容易初学者入手Linux ...
- Careercup - Facebook面试题 - 23869663
2014-05-02 03:37 题目链接 原题: A string is called sstring if it consists of lowercase english letters and ...
- 2729:[HNOI2012]排队 - BZOJ
题目描述 Description某中学有n 名男同学,m 名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人 ...