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 ...
随机推荐
- 如何获取域名的ip地址
- c++读书笔记, 零散点滴的收获
1. 字节长度: short <= int <= long <= long long 2. wchar_t,最大扩展字符集合:char16_t.char32_t,unocide字符集 ...
- OC中用NSSortDescriptor对象进行数组排序
//创建一个数组 NSArray *array = @[@"one", @"two", @"three", @"four" ...
- IE 文档模式
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv= ...
- vi技巧合集
VIM 技巧 match & replace match the whole word(eg: match printf but not snprintf/fprintf)You can us ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- mount: /dev/sdb1 already mounted or /mnt/hdb busy 导致NameNode无法启动
最近,公司由于断电导致的服务器关机,等到来电了,重启集群发现Namenode无法启动,查看原因是由于无法加在faimage文件,在查看一下Namenode的磁盘挂在情况(df -h命令查看),发现磁盘 ...
- K均值聚类算法的MATLAB实现
1.K-均值聚类法的概述 之前在参加数学建模的过程中用到过这种聚类方法,但是当时只是简单知道了在matlab中如何调用工具箱进行聚类,并不是特别清楚它的原理.最近因为在学模式识别,又重新接触了这 ...
- Java学习1 - java 历史
Sun的Java语言开发小组成立于1991年,其目的是开拓消费类电子产品市场,例如:交互式电视,烤面包箱等.Sun内部人员把这个项目称为 Green,那时World Wide Web还在图纸上呢.该小 ...
- em 和 px相互转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...