jQuery实现点赞图片1的动画效果(带在线演示和演示源代码下载)

本文描述了jQuery给图片一个赞的动画效果。分享给大家参考，如下：

运行效果截图如下：

单击此处查看在线演示。

单击此处下载完整的示例代码。

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /！-font style-linkrel='样式表' href=' icon font/icon font . CSS ' type=' text/CSS '/！-必要的样式-linkrel='样式表' href=' CSS/index . CSS ' type=' text/CSS '/link rel='样式表' href=' CSS/animate . CSS ' type=' text/CSS '/Title点击弹出1放大效果/Title/head dydiv class=' box ' h1app主题界面设计大赛/h1 div class=' content ' p故事很久以前就开始了，宇宙的另一端有一颗行星叫做UU Star。柚星人每天都过着精彩快乐的生活。它们看起来像一个又圆又甜的柚子。他们出门买东西都开UU飞船。地球上的人都叫它UFO。他们有许多圆圈，都在这个星球附近。有时他们去这里看，有时他们去那里看。柚星人很勤劳。为什么这么说？因为他们喜欢记录。不管是好是坏，记录诞生了。他们最喜欢的食物是柚子果，虽然不大，但是里面有很多能量。每天起床后，他们按下闹钟，新的一天开始了，然后他们检查火箭是否带来了任何意想不到的惊喜。如果什么都没有，他们的卫星将被再次搜索。在这里听到这个故事很神奇吗？我们现在去柚子之星吧！/p/div/div class=' opera ' span id=' BTN ' I class=' icon font/I click/span/div Script src=' http : js/jquery . min . js ' type=' text/JavaScript '/Script type=' text/JavaScript '(函数($) {$)。extend({ tips box : function(options){ options=$。要在html标记上显示扩展({obj3360 null，//jq对象，字符串：' 1 '，//要显示的字符串。也可以传递一个html，比如： ' b style=' font-family : Microsoft yahei；1' startSize: '12px '，//end text size : ' 30px '，//end text size interval: 600，//动画时间间隔color3360' red '，//text color callback 3360 function(){ }//callback function }。$(“body”)。追加(' span class=' num ' ' options . str '/span ')；var box=$('。num’)；var left=options.obj.offset()。left options . obj . width()/2；var top=options.obj.offset()。top-options . obj . height()；box . CSS({ ' position ' : ' absolute '，' left': left 'px '，' top': top 'px '，' z-index': 9999，' font-size ' : options . start size，' line-height ' : options . end size，' color ' : options . color })；box . animate({ ' font-size ' : options . end size，' opacity': '0 '，' top ' : top-parsent(options . end size)' px ' }，options.interval，function(){ box . remove()；options .回调()；});} });})(jQuery)；函数niceIn(prop){ prop.find('i ')。add CLaSS(' NiSein ')；setTimeout(函数(){ prop.find('i '))。remove CLaSS(' NiSein ')；},1000);}$(function () { $('#btn '))。单击(function () { $)。tipsBox({ obj: $(this)，str: ' 1 '，callback : function(){ })；niceIn($(this))；});});/script/body/html希望本文对jQuery编程有所帮助。