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的动画效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. two.js之实现动画效果

    一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁 ...

  4. js判断css动画效果是否结束

    <!-- css样式 --> <style> .test{ width: 100px; height: 100px; transition: all 5s; backgroun ...

  5. 通过JS完成电梯动画效果

    实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果 用JS写了一个 <!DOCTYPE html> <html> <head> <met ...

  6. anime.js 实战:实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  7. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  8. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  9. jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

随机推荐

  1. EntityFrame Work:No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient'

    今天试着学习了Entity Frame Work遇到的问题是 The Entity Framework provider type 'System.Data.Entity.SqlServer.SqlP ...

  2. Visual Studio 2015 新建MVC项目 Package Manager Console不能使用 (HRESULT: 0x80131500)

    Visual studio 2015 突然新建不了MVC项目,报出错误: HRESULT: 0x80131500 在折腾了很长时间,最后在Github上看到这样一个贴 地址:https://githu ...

  3. ASP.NET MVC 4 (三) 过滤器

    先来看看一个例子演示过滤器有什么用: public class AdminController : Controller { // ... instance variables and constru ...

  4. petset翻译

      Terminology     通过这个文档,你将会看到一些术语,有时候他们在别的地方交叉使用,这可能会引起一些困惑.这一节的 是帮助你理清楚他们. Node: 一个简单的虚拟或物理机在你的一个k ...

  5. ES6中块作用域之于for语句是怎样的?

    在ES6中新加了快作用域的概念(C语言就有,作为类c语言的js,当然应该加上),算是很好理解. { let i; } console.log(i);// i is not defined 在代码块当中 ...

  6. ie8 window.open导出文件报错

    js创建一个<a>元素hiddenElementhiddenElement.setAttribute('href','')hiddenElement.setAttribute('targe ...

  7. LLBLGen Pro v4.2_Patch+Keygen

    将dll文件覆盖安装目录下的文件,之后用算号器算出license文件,将license文件放在安装目录下即可. 算号器是在http://www.dxper.net/thread-408-1-1.htm ...

  8. string的实现

    面试常常用到string类的实现,自己总结了一下: #pragma once #include <iostream> #include <cassert> #include & ...

  9. Android事件分发机制(下)

    这篇文章继续讨论Android事件分发机制,首先我们来探讨一下,什么是ViewGroup?它和普通的View有什么区别? 顾名思义,ViewGroup就是一组View的集合,它包含很多的子View和子 ...

  10. JavaScript之全局变量和隐式全局变量

    通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的. 无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的.