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 ...
随机推荐
- HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 出现环境:win7 + IIS7.0 解决办法 ...
- AAS代码运行-第11章-2
hdfs dfs -ls /user/littlesuccess/AdvancedAnalysisWithSparkhdfs dfs -mkdir /user/littlesuccess/Advanc ...
- 近期编程问题——epoll failed:bad file descriptor
出现问题:epoll_wait:Bad file descriptor 原因:IO时间的socket描述符在epoll_ctl处理前就关闭了. 解决方法:不要在epoll_ctl之前关闭socket描 ...
- VMware虚拟机无法ping通/分配虚拟IP/远程访问的问题的解决方案:
最近老板要写俩web系统,没有自己的服务器,没办法,只好先借用下学院的服务器做下测试调试.那好,问题来了~ 学院的服务器不是我一个人在维护,经常有其他人登进登出(!!!担心文件丢失啊!!!),硬伤!! ...
- sql语句格式化数字(前面补0)、替换字符串
以下是详细分析: 1.select power(10,3)得到1000(即:10的3次方) 2.select cast(1000+33 as varchar) 将1000转换类型(即:将int转化成v ...
- 用JAVA写简单的栈
package com.gailekesi.example.expl_tuple; import javax.naming.NameNotFoundException; import java.awt ...
- Mysql EF Code First
1.更新程序包EntityFramework->6.1.3 2.下载程序包MySql.Data.Entities(Ver:6.8.3) 3.修改config.cs或者web.config,包含以 ...
- 将本地代码上传至github备份的操作方法
这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三步:填写名称,简介(可选),勾选Initialize this repository with a R ...
- vs2013源码编译zlib 1.2.8
1.从 zlib 官网上下载 zlib最新版 1.28 的源码,解压到 zlib-1.2.8 2.使用vs2013打开vc11目录下的sln工程文件(进行单向升级) 3.修改zlibvc工程属性--& ...
- 安装mysql sever 向导失败,最后一步无响应
在配置apache+php+mysql环境的时候,apache和php都可以运行,这里提供两个安装教程(window环境) http://apps.hi.baidu.com/share/detail/ ...