本文實例講述了jQuery實現的給圖片點贊+1動畫效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
點擊此處查看在線演示。
完整實例代碼點擊此處本站下載。
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--字體樣式--><link rel="stylesheet" href="iconfont/iconfont.css" type="text/css" /><!--必要樣式--><link rel="stylesheet" href="css/index.css" type="text/css" /><link rel="stylesheet" href="css/animate.css" type="text/css" /><title>點擊彈出 +1放大效果 </title></head><body><div class="box"> <h1>APP主題界面設計大賽</h1> <div class="content"> <p>故事從很久很久以前開始，遠在宇宙的另一端有一個星球，叫作柚柚星（UU Star）。柚柚星人他們每天過著精彩而又快樂的生活，他們長的就像一只圓圓甜甜的柚子。他們出門或是買東西都開UU飛船，地球人管它叫UFO。他們有很多的圈子，都在這個星球附近，他們有的時候走到這里看看，有時又到那里瞧瞧。柚柚星人很勤勞，為什么這么說吶，因為他們喜歡做記錄，無論好壞，總之記錄就這么誕生了。他們最愛吃的是柚果，別看柚果不大，那里面有很多很多的能量哦。他們每天起床都會按一下鬧鐘，新的一天開始了，然后查看火箭有沒有送來什么意外的驚喜。如果什么都沒有的話，他們的衛星就會重新搜索。故事聽到這里是不是覺得很神奇，那我們現在就去柚柚星看看吧！ </p> </div></div><div class="opera"> <span id="btn"> <i class="iconfont"></i> 點擊 </span></div><script src="js/jquery.min.js" type="text/javascript"></script><script type="text/javascript">(function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq對象，要在那個html標簽上顯示 str: "+1", //字符串，要顯示的內容;也可以傳一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>" startSize: "12px", //動畫開始的文字大小 endSize: "30px", //動畫結束的文字大小 interval: 600, //動畫時間間隔 color: "red", //文字顏色 callback: function () { } //回調函數 }, options); $("body").append("<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.startSize, "line-height": options.endSize, "color": options.color }); box.animate({ "font-size": options.endSize, "opacity": "0", "top": top - parseInt(options.endSize) + "px" }, options.interval, function () { box.remove(); options.callback(); }); } });})(jQuery);function niceIn(prop){ prop.find('i').addClass('niceIn'); setTimeout(function(){ prop.find('i').removeClass('niceIn'); },1000); }$(function () { $("#btn").click(function () { $.tipsBox({ obj: $(this), str: "+1", callback: function () { } }); niceIn($(this)); });});</script></body></html>希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
