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 ...
随机推荐
- 解析提高PHP执行效率的50个技巧
1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP手 ...
- NOIP 2015 游记
本来和zly和wxh约好了 高三一起再来玩一次复赛,结果最终只有我一个人来了说...貌似是年段主任不让去...总算见识了比我们学校的YSD更爱管闲事的年段主任. 今年比赛竟然在衢州二中,学校不大,但感 ...
- java格式化时间格式
System.out.println("Hello World!"); SimpleDateFormat format = new SimpleDateFormat( " ...
- 端口限制情况下php+xdebug环境配置
PHP程序在开发的时候调试是比较方便的,大体情况下,输出,打log是可以解决几乎所有问题. 但是还不够,有些问题,用打log的形式定位问题是相当痛苦的事情,有些时候测试环境没配好的话,你可能需要做许多 ...
- 理解js中__proto__和prototype的区别和关系
首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto ...
- SVN相关
Eclipse SVN忽略一些文件夹:Windows -> Preferences -> Team -> Ignored Resources里点 “Add Pattern”,然后把 ...
- 核心动画与UIView的区别
核心动画与UIView的区别 1.核心动画只作用于layer,使用核心动画之前,必须有layer 2.核心动画只是假象,并没有移动实际位置 什么时候使用核心动画,什么时候使用UIView动画 1.当不 ...
- java day2一个模拟双色球的代码
package day2; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt ...
- java基础之 工具类
一.StringUtils StringUtils.isEmpty(null) && StringUtils.isEmpty(""); // true String ...
- java中的foreach循环
foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本,但是foreach语句并不能完全取代for语 ...