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. mongogogog

    $cmp,$eq,$gt,$gte,$lt,$lte,$ne$setEquals,$setIntersection,$setUnion,$setDifference,$setLsSubset,$any ...

  2. Bootstrap <基础十二>下拉菜单(Dropdowns)

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  3. DataSet集合直接根据传入的类转List<T>集合

    最近比较忙,好久没写博客了.个人感觉最好的进步就是写东西.哈哈. 一般我们使用ADO.net从数据库中读取数据返回的集合是DataSet类型的.有时候我们需要进行转换成List<T>集合. ...

  4. i7 4790 z97-ar ssd 固态硬盘 装机的一些经历

    今天电脑终于装好了,我于七夕情人节前后的几天配了一台台式机用开发,期间遇到了一些问题与大家分享一下,希望对一些朋友有帮助. 1 买HIMD线,各个零件全部组装好后,我意识到一个问题没买HIMD线,我的 ...

  5. MyEclipse Java Build Path详解

    转载自:http://blog.163.com/magicc_love/blog/static/185853662201111161580631/ 1.设置"source folder&qu ...

  6. 详解Android中AsyncTask的使用

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...

  7. 如果Python中有很多换行,可以选择使用"""..."""表示多行内容

    举例:>>> print("""... ... ... ... ... ... ... ... ''')... fdfd""&quo ...

  8. js⑦

    立即执行函数or自执行函数 为了避免全局变量的产生.(function(){ //var a = 10; //var b = 20;//console.log(a,b); -------------v ...

  9. SQLserver日期函数

      ------------------日期转化成年月日时分秒毫秒--------------- select 'R'+CONVERT(varchar(100), GETDATE(), 112)+ri ...

  10. MySQL 配置文件中忘配置default-character-set引发的乱码问题

    今天,一开发同事使用jdbc连接数据库执行一条语句无结果集,但是通过sqlyou执行相同的语句有返回结果. 执行的语句where条件中含有中文,这应该是字符集引起的 此开发测试实例刚迁移不久的,查看迁 ...