js +1的动画效果
var fnPlusAnimate = function(str, options){
if (typeof str === 'object') {
options = str;
str = undefined;
}
var s = str || '+1',
opt = $.extend({
style : '',
target : null,
align : 'center',
speed : 'slow',
stopDist : 50,
animateDone : function(){}
}, options || {}),
$elem = $('<span></span>'),
$target = $(opt.target),
offset = $target.offset(),
width = $target.width(),
align = opt.align,
left = offset.left + (align === 'left' ? 0 : align === 'right' ? width : width / 2),
w, h;
$elem.text(s).attr('style', opt.style).css({
'position' : 'absolute',
'top' : offset.top,
'font-size' : 24,
'color' : '#3dbdff',
'opacity' : 0,
'z-index' : 4
}).appendTo($('body'));
w = $elem.outerWidth(true);
h = $elem.outerHeight(true);
$elem.css({
'opacity' : 1,
'left' : left - w / 2
}).animate({
'top' : offset.top - opt.stopDist,
'opacity' : 0
}, opt.speed, function(){
$elem.remove();
opt.animateDone.apply(this, arguments);
});
};
fnPlusAnimate('+1', {
target : target
});
js +1的动画效果的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- two.js之实现动画效果
一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁 ...
- js判断css动画效果是否结束
<!-- css样式 --> <style> .test{ width: 100px; height: 100px; transition: all 5s; backgroun ...
- 通过JS完成电梯动画效果
实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果 用JS写了一个 <!DOCTYPE html> <html> <head> <met ...
- anime.js 实战:实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- jQuery Easing动画效果扩展(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
随机推荐
- sass入门教程
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,必须先 ...
- callback 转换到 promise
最近项目迭代,从express到koa,面对callback,想偷懒,就想到了Proxy对象 new Proxy(docker,{ get : function (obj,name) { return ...
- store前台数据过滤
最近由于客户需要对grid进行大量的检索操作,而现有的grid数据是以分页的形式从数据库端获取,每次检索都需要重新进行获取,效率很低. 因而将数据进行一次加载,每次的检索操作在前台extjs进行过滤, ...
- android 初步了解应用Gson 解析Json数据
1,因为没有服务器返回数据,对于Tomcat又懒得去配,所以我直接把数据写死到app中 先写一个实体类,便于操作 /** * 实体类 */ public class Person { int id ; ...
- javaIO系统----再看装饰者模式
javaIO系统拥有各种各样的类,尤其是每次要进行读写操作时,总会一层套一层的new,以前不明白为什么要这样做,不过学习了适配器模式后,对于这种做法立刻了解了:动态扩展IO的功能,使之符合使用者的习惯 ...
- AngularJs的UI组件ui-Bootstrap分享(九)——Alert
alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...
- 近期编程问题——read:resource temporarily unavailable
EAGAIN错误 出现问题:read:resource temporarily unavailable 原因:这种错误一般出现宰非阻塞的socket编程中,资源暂时不可用. 我的解决方法:囧,后来改成 ...
- 清除缓存,计算Sql Server查询效率
--优化之前 DBCC FREEPROCCACHE DBCC DROPCLEANBUFFERS SET STATISTICS IO ON select Dtime,Value from dbo.his ...
- php 序列化、json
序列化 和 反序列化1. serialize和unserialize函数 2. json_encode 和 json_decode 使用JSON格式序列化和反序列化3. var_export 和 ev ...
- 移动测试主要使用的测试框架,基于python
1.uiautomator google自己的测试框架,可以跨应用测试, 语言支持java,python也可以在GitHub上找到封装的包,去调用uiautomator. 2.Robotium jav ...