20140110更新：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>提示插件</title>
<style>
body {margin:0;padding:0;font:12px/18px arial;color:#666;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
/**
* Created by 磊 on 14-1-9.
*/
;(function($){
$.fn.extend({
tipsbox: function(options) {
options = $.extend({
str: "+1",
startSize: "14px",
endSize: "40px",
interval: 500,
color: "red",
style: "",
callback: function() {}
}, options);
$("body").append("<span class='tips_box' style='"+ options.style +"'>"+ options.str +"</span>");
var box = $(".tips_box");
var self = $(this);
var top = self.offset().top;
var left = self.offset().left + self.width() / 2 - box.width() / 2;
//alert(layer.width());
box.css({
"position": "absolute",
"top": top,
"left": left,
"font-size": options.startSize,
//"font-weight": "bold",
"color": options.color
});
box.animate({
"top": top - self.height() / 2,
"opacity": 0,
"font-size": options.endSize
}, options.interval, function() {
box.remove();
options.callback();
});
}
});
})(jQuery);
</script>
</head>
<body>
<p style="padding:100px;"><input id="btn" type="button" value="點擊" style="width:100px;height:34px;font-size:16px;border:none;background-color:#f6f6f6;border:1px solid #ddd;border-radius:3px;color:#666;font-family:Microsoft YaHei;cursor:pointer;outline:none;"/></p>
<script>
$(function() {
$('#btn').click(function() {
$('#btn').tipsbox({
style: 'font-weight:bold;',
callback: function() {
//alert("fuck");
}
});
});
});
</script>
</body>
</html>
20140107更新：
最近工作的項目中，需要這樣的功能，最初寫了函數，滿足不了需求，so。。。封裝成了插件，考慮到幾種情況，傳遞給一個元素，彈窗會出現在這個元素的位置。可以設置字體大小、顏色什么的。。最初文字大小、結束文字大小，動畫完成時間等等。。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點擊彈出 +1放大效果 -- jQuery插件</title> <style type="text/css"> body {margin:0; padding:0;font:12px/1.5 arial; color:#3E3E3E;} p {margin-bottom:80px;} #btn {width:90px;height:36px;border:none;background-color:#069;color:#fff;font-size:14px;font-family:Microsoft YaHei;cursor:pointer;} </style> </head> <body> <p> </p> <p> </p> <p> </p> <p style="text-align:center;"><button id="btn">點擊我</button></p> <p> </p> <p> </p> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script> ;(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); </script> <script> $(function() { $("#btn").click(function() { $.tipsBox({ obj: $(this), str: "+998", callback: function() { //alert(5); } }); }); }); </script> </body> </html>
其實很簡單，就文字不斷的增大的同時，透明度慢慢減小。。。。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>+1</title> </head> <body> <input type="button" value="狠狠的點我" id="btn" style="width:100px;margin:100px;" onclick="numPop(event, '+10');"> <input type="button" value="點我" id="btn" style="width:100px;margin:100px;" onclick="numPop(event, '+100分');"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> function numPop(event, str){ var html = '<div id="pop_num">'+ str +'</div>'; $('body').append(html); $('#pop_num').css({ 'position': 'absolute', 'top': event.pageY + 'px', 'left': event.pageX + 'px', 'font-size': '20px', 'color': '#f30' }); $('#pop_num').animate({ 'font-size': '150px', 'opacity': '0' },'slow', function(){ $(this).remove(); }); } </script> </body> </html>
在寫這個效果的時候，遇到一個問題，我最初是這樣寫的:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>+1</title> </head> <body> <input type="button" value="狠狠的點我" id="btn" style="width:100px;margin:100px;"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn').click(function(e){ var html = '<div id="pop_num">+1</div>'; $('body').append(html); $('#pop_num').css({ 'position': 'absolute', 'top': e.pageY + 'px', 'left': e.pageX + 'px', 'font-size': '20px', 'color': '#f30' }); $('#pop_num').animate({ 'font-size': '150px', 'opacity': '0' },'slow', function(){ $(this).remove(); }); }); }); </script> </body> </html>
這樣很容易就實現我需要的效果，但是考慮的程序中，可能不是每次都是 +1， 也可能是+10，所以要封裝成函數，把想要的彈出的字符串當成參數傳遞給函數，於是我又這樣寫：
<input type="button" value="狠狠的點我" id="btn" style="width:100px;margin:100px;" onclick="numPop('+10');"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> function numPop(str, e){ var html = '<div id="pop_num">'+ str +'</div>'; $('body').append(html); $('#pop_num').css({ 'position': 'absolute', 'top': e.pageY + 'px', 'left': e.pageX + 'px', 'font-size': '20px', 'color': '#f30' }); $('#pop_num').animate({ 'font-size': '150px', 'opacity': '0' },'slow', function(){ $(this).remove(); }); } </script>
但是，卻出錯了，沒能實現效果，問了一下QQ群里的同行，發現我兩個地方寫錯了。。
首先，function numPop(str, e) 這個地方應該修改成 function numPop(event, str), event必須作為第一個參數，只能寫成event，不能寫成e、ev或者其他的；
其次，調用的時候，應該這么調用 onclick="numPop('event, +10');" 那個event也要寫上。。
蒼天啊，大地啊，這么簡單的問題，我居然。。。