-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathliked-2.html
80 lines (79 loc) · 2.62 KB
/
liked-2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<title>点赞动效demo</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="robots" content="nofollow" />
<meta charset="UTF-8" />
</head>
<body>
<style>
.zan-btn{
width: 100px;
text-align: center;
margin-top: 100px;
position: relative;
}
.num img{
width: 100%;
}
</style>
<div class="zan-btn">
点击
</div>
<script src="http://demo.jb51.net/js/2015/jquery-pic-add-click-like-style-codes/js/jquery.min.js"></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: "50px", //动画结束的文字大小
interval: 600, //动画时间间隔
color: "red", //文字颜色
startWidth: '5px', //图片开始大小
endWidth:'30px', //图片结束大小
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,
"width":options.startWidth,
"line-height": options.endSize,
"color": options.color,
});
box.animate({
"font-size": options.endSize,
"width":options.endWidth,
"opacity": "0",
// "top": top - parseInt(options.endSize) + "px"
"top": top - parseInt(options.endSize) - 30 + "px"
}, options.interval, function () {
box.remove();
options.callback();
});
}
});
})(jQuery);
$(function () {
$(".zan-btn").on("touchstart",function () {
$.tipsBox({
obj: $(this),
str: "<img src='/blog/img/xin.png'>",
callback: function () {
}
});
});
});
</script>
</body>
</html>