<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
position: absolute;
top: 100px;
left: 300px;
}
#box a{
font-size: 30px;
font-family: "微软雅黑";
color: #ccc;
text-decoration: none;
}
#box span{
top: -22px;
left: 0;
color: red;
font-size: 20px;
font-family: "微软雅黑";
position: absolute;
}
#box #click{
height: 40px;
width: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}



</style>
</head>
<body>
<div id="box">
<a>赞</a>
<div id="click"></div>

</div>
<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function Zan(){
this.oBox=document.getElementById("box");
this.oA=document.getElementsByTagName('a');
this.oClick=document.getElementById("click");
this.num=0;
this.oSpan=null;
}
Zan.prototype.click=function(){
var This=this;
this.oClick.onclick=function(){
This.num=This.getcookie('name');
This.num++;
This.oSpan=document.createElement('span');
This.oSpan.innerHTML='+'+This.num;
This.oBox.appendChild(This.oSpan);
This.oSpan.move({'opacity':0,'top':-30},300,function(){
This.oBox.removeChild(this);
});
this.setcookie('name',This.num,10);
}
}
var zan=new Zan();
zan.click();
</script>
</body>
</html>

move.js

Object.prototype.move = function( mJson , time , cv , fn ){
if ( typeof cv == 'undefined' )
{
time = time || 400;
cv = 'linear';
}
if ( typeof time == 'string' )
{
fn = cv;
cv = time;
time = 400;
}else if ( typeof time == 'number' && typeof cv == 'function' )
{
fn = cv;
cv = 'linear';
}else if ( typeof time == 'function' )
{
fn = time;
time = 400;
cv = 'linear';
}
var This = this;
var iB = {};
var startTime = (new Date()).getTime();
for ( var attr in mJson )
{
if( attr == 'opacity' ){
iB[attr] = parseInt( this.getStyle(this , attr)*100 );
}else{
iB[attr] = parseInt( this.getStyle(this , attr) );
}

};
clearInterval( this.timer );
this.timer = setInterval(function(){
var nowTime = (new Date()).getTime();
var it = nowTime - startTime;
if( it >= time ){
it = time;
}
for ( var attr in mJson )
{
var value = Tween[cv]( it , iB[attr] , parseInt( mJson[attr] ) - iB[attr] , time );
if(attr == 'opacity'){
This.style.filter = 'alpha( opacity='+value+' )';
This.style.opacity = value / 100;
}else{
This.style[attr] = value + 'px';
}

}
if ( it == time )
{
clearInterval( This.timer );
fn && fn.call(This);
}
},13);
var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b;
},
easeIn: function(t, b, c, d){ //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){ //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){ //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){ //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){ //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}
};
Object.prototype.getStyle = function( obj , attr ){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};

cookie多次点赞效果的更多相关文章

  1. Android -- 自定义ViewGroup+贝塞尔+属性动画实现仿QQ点赞效果

    1,昨天我们写了篇简单的贝塞尔曲线的应用,今天和大家一起写一个QQ名片上常用的给别人点赞的效果,实现效果图如下: 红心的图片比较丑,见谅见谅(哈哈哈哈哈哈).... 2,实现的思路和原理 从上面的效果 ...

  2. Android类似Periscope点赞效果

    原文   https://github.com/AlanCheen/PeriscopeLayout 主题 安卓开发 PeriscopeLayout A layout with animation li ...

  3. Android -- 《 最美有物》好看的点赞效果

    1,前天在鸿洋的公众号上看到一款不错的点赞效果,是仿最美有物的点赞,再加上自己最近学习状态很差,自己想着通过这个效果练手一下,果然,花了整整两天的时间,按照以前的效率的话一天就够了,哎,已经调整了一个 ...

  4. JavaScript cookie操作实现点赞功能

    JavaScript cookie操作实现点赞功能 参考实现原理,但是代码不够简洁,简洁代码参考:js操作cookie 实现一个点赞功能十分简单,主要问题在于不能重复点赞.  若是一个有用户的网站,可 ...

  5. Flutter仿掘金点赞效果

    老孟导读:今天分享一下如何实现掘金点赞效果,这不仅仅是一篇技术文章,还是一篇解决问题思路的文章,遇到一个需求时,如何拆分需求,然后一步一步实现,这个过程比单纯的技术(此文)更有含金量. 先来看一下掘金 ...

  6. Java用Cookie简单限制点赞次数

    楼主最近在搞一个当下比较流行的点赞功能,这个功能也是让程序员又爱又恨啊 说起爱,点赞是个社会化的动作,全民都在为美好的事情,行为,动作,点赞. 说起恨,你很难在用户没有登录的情况下限制恶意点赞的机器人 ...

  7. jquery 超简单的点赞效果

    1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...

  8. 小程序数据绑定点赞效果切换（交流QQ群：604788754）

    如果对本例有更好的意见和建议,希望给予留言或是加群跟群主联系,交流学习. WXML: <block wx:for="{{nums}}" wx:for-index='idx' ...

  9. animate.css做点赞效果

    花了一晚上研究出来的,感觉还行吧... 代码: 源码下载: http://image.niunan.net/animatedemo.zip

随机推荐

  1. kafka消费者客户端（0.9.0.1API）

    转自:http://orchome.com/203 kafka客户端从kafka集群消费消息(记录).它会透明地处理kafka集群中服务器的故障.它获取集群内数据的分区,也和服务器进行交互,允许消费者 ...

  2. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  3. jQuery基本操作

    jQuery简介 jQuery是一个兼容多浏览器的javascript库,极大地简化了 JavaScript 编程,核心理念是write less,do more(写得更少,做得更多),对javasc ...

  4. POJ-1028 Web Navigation 和TOJ 1196. Web Navigation

    Standard web browsers contain features to move backward and forward among the pages recently visited ...

  5. FireDAC 连接access MDB数据库的方法

    Use Cases Open the Microsoft Access database. DriverID=MSAcc Database=c:\mydata.mdb Open the Microso ...

  6. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  7. 以小时候玩的贪吃蛇为例，对于Java图像界面的学习感悟

    简介 正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...

  8. 立即执行函数: (function(){...})() 与 (function(){...}()) 有什么区别?

    没有区别. function foo() {...} // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo(); // 这是语句,Statement:解释器遇到语 ...

  9. laravel框架总结(八) -- ORM模型

    ORM模型简介 1>什么是ORM? ORM,即 Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在操作具体的 ...

  10. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...