javascript-jquery插件

1.jquery创建插件

jQuery.extend({插件名:函数体,插件名:函数体});

html部分

<div id="div1">开始动画</div>

jquery部分

$(function(){
			$("#div1").click(function(){
				$(this).animate(
					{"left":800},
					6000,
					"easeOutBounce",
					function(){
						$(this).html("动画结束");
					}

				);

			});
		});

  插件部分

jQuery.extend(jQuery.easing, {
	easeOutBounce: function(x, t, b, c, d)
	{
		if ((t /= d) < (1 / 2.75))
		{
			return c * (7.5625 * t * t) + b;
		}
		else if (t < (2 / 2.75))
		{
			return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
		}
		else if (t < (2.5 / 2.75))
		{
			return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
		}
		else
		{
			return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
		}
	}
});

  

时间: 2024-08-27 14:38:20

javascript-jquery插件的相关文章

Javascript - Jquery - 插件

插件(Plugin) livequery插件 比如如果为页面上的所有div绑定了click事件,那么之后如果再动态创建一个div插入文档后,这个div则不会有click事件,livequery插件能使后来动态创建的元素也能自动注册事件. livequery(type,x,y) 为JQuery对象绑定事件(包括使用Javascript动态插入的元素),type是事件触发方式,x是事件侦听器,y是可选的事件完成后的回调方法. $(document).ready(function () { //使用l

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

javaScript学习总结(二)——jQuery插件的开发

概要 jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:http://plugins.jquery.com/ 一.插件开发基础 1.1.$.extend 在jQuery根命名空间下直接调用的方法可以认为是jQuery的静态方法或属性,常常使用方法名来调用,使用.方法名来调用,使用.extend这个静态方法可以完成两个功

最新的jQuery插件和JavaScript库

每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊叹的东西,那里是吨伟大的jQuery插件和JavaScript库在那里,插件和图书馆,涵盖了各种各样的功能. 在这篇文章中我们已经编译列表的JavaScript库为2015年7月,在这篇综述中,我们已经覆盖特征丰富和互动的JavaScript库,为您提供多种功能,能为你建立有效和有用的Web应用提供

JQuery和javascript优秀插件收集

JQuery插件库: http://plugins.jquery.com/ 有趣的时钟: http://ynif.v099.10000net.cn/demo/shijian/3/shijian/index.html 别人收集信息8个实用的页面布局和用户界面jQuery插件http://blog.ui90.com/eight-practical-jquery-plugin-page-layout-and-user-interface.html15款最好的 jQuery 网格布局插件(Grid Pl

构建基于Javascript的移动web CMS——添加jQuery插件

当看到墨颀 CMS的菜单,变成一个工具栏的时候,变觉得这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件示例 一个简单的组合示例如下所示,在main.js中添加下面的内容 requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] } } ); 接着在另外的文件中添加 define(["jquery"], funct

构建基于Javascript的移动web CMS——加入jQuery插件

当看到墨颀 CMS的菜单,变成一个工具栏的时候.变认为这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件演示样例 一个简单的组合示比例如以下所看到的,在main.js中加入以下的内容 requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] } } ); 接着在另外的文件里加入 define(["jquery"],

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

12个最新免费的jQuery插件周报#5(2015年)

(06/03/2015 至 13/03/2015)这周收集的12个最好.最新的12个免费jQuery插件 Elastic SVG Sidebar Material Design 弹性SVG侧栏导航,受 Material Design 启发 Animating labels for input form 非常适合于小屏幕的动画浮动标签. jQuery Light Carousel Light Carousel 是一个轻量级的响应式 jQuery carousel轮播. jQuery polygon