这个点赞Demo是仿直播App中的点赞特效做的，主要是借用了雪花插件（snowflake.js）的代码，性能上没有做优化，只是做了这样一个效果。
修改过的js代码：
(function() {
function b(g, f, h) {
if (g.addEventListener) {
g.addEventListener(f, h, false)
} else {
g.attachEvent && g.attachEvent("on" + f, h)
}
}
function m(g) {
if (typeof window.onload != "function") {
window.onload = g
} else {
var f = window.onload;
window.onload = function() {
f();
g()
}
}
}
function e() {
var g = {};
for (type in {
bottom: "",
Left: ""
}) {
var f = type == "bottom" ? "Y" : "X";
if (typeof window["page" + f + "Offset"] != "undefined") {
g[type.toLowerCase()] = window["page" + f + "Offset"]
} else {
f = document.documentElement.clientHeight ? document.documentElement : document.body;
g[type.toLowerCase()] = f["scroll" + type]
}
}
return g
}
function a() {
var g = document.body,
f;
if (window.innerHeight) {
f = window.innerHeight
} else {
if (g.parentElement.clientHeight) {
f = g.parentElement.clientHeight
} else {
if (g && g.clientHeight) {
f = g.clientHeight
}
}
}
return f
}
function d(f) {
this.parent = document.body;
this.createEl(this.parent, f);
this.size = Math.random() * 20 + 10;
this.el.style.width = Math.round(this.size) + "px";
this.el.style.height = Math.round(this.size) + "px";
this.maxLeft = document.body.offsetWidth - this.size;
this.maxbottom = document.body.offsetHeight - this.size;
//this.left = Math.random() * this.maxLeft;
//this.bottom = e().bottom + 1;
this.left = document.getElementById("like").offsetLeft;
this.bottom = this.maxbottom - document.getElementById("like").offsetTop;
this.angle = 1.4 + 0.2 * Math.random();
this.minAngle = 1.4;
this.maxAngle = 1.6;
this.angleDelta = 0.01 * Math.random();
this.speed = 3 + Math.random();
}
var c = false;
m(function() {
c = true
});
var n = true;
window.createSnow = function(h, g) {
if (c) {
var i = [];
i.push(new d(h));
var f = setInterval(function() {
//n && g > i.length && Math.random() < g * 0.1 && i.push(new d(h));
!n && !i.length && clearInterval(f);
for (var j = e().bottom, l = a(), k = i.length - 1; k >= 0; k--) {
if (i[k]) {
if (i[k].bottom < j || i[k].bottom + i[k].size + 1 > j + l) {
i[k].remove();
i[k] = null;
i.splice(k, 1)
} else {
i[k].move();
i[k].draw()
}
}
}
}, 20);
b(window, "scroll", function() {
for (var j = i.length - 1; j >= 0; j--) {
i[j].draw()
}
})
} else {
m(function() {
createSnow(h, g)
})
}
};
window.removeSnow = function() {
n = false
};
var images = ['bear', 'blue', 'green', 'red'];
d.prototype = {
createEl: function(g, f) {
var num = Math.floor(Math.random()*4);
//设置元素的属性
this.el = document.createElement("img");
this.el.setAttribute("src", "images/"+images[num]+".png");
this.el.style.position = "absolute";
this.el.style.display = "none";
this.el.style.zIndex = "99999";
this.el.className = "Snowflake";
this.parent.appendChild(this.el);
},
move: function() {
if (this.angle < this.minAngle || this.angle > this.maxAngle) {
this.angleDelta = -this.angleDelta
}
this.angle += this.angleDelta;
this.left += this.speed * Math.cos(this.angle * Math.PI);
this.bottom -= this.speed * Math.sin(this.angle * Math.PI);
if (this.left < 0) {
this.left = this.maxLeft
} else {
if (this.left > this.maxLeft) {
this.left = 0
}
}
},
draw: function() {
this.el.style.bottom = Math.round(this.bottom) + "px";
this.el.style.left = Math.round(this.left) + "px";
this.el.style.display = "block";
},
remove: function() {
this.parent.removeChild(this.el);
this.parent = this.el = null
}
}
})();页面使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<title>点赞demo</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
*{margin:0;padding:0;list-style:none;}
html,body{height:100%;overflow: hidden;}
/* 以下是CSS3样式，适合高版本浏览器 */
.Snowflake{animation:linear spin infinite 20s;-webkit-animation:linear spin infinite 20s;-moz-animation:linear spin infinite 20s;pointer-events:none;}
@keyframes spin{
0% {transform:rotate(0deg);}
100% {transform:rotate(359deg);}
}
@-webkit-keyframes spin{
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(359deg);}
}
@-moz-keyframes spin{
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(359deg);}
}
#like{position: absolute;bottom: 20%;left: 50%; z-index: 100000;}
</style>
</head>
<body>
<div class="container">
<button id="like" class="btn btn-primary" type="button">点赞</button>
<div class="container">
<script src="snowflake.js"></script>
<script>
var likeBtn = document.getElementById("like");
//判断手持设备
var touched = ("createTouch" in document)?"touchend":"mouseup";
likeBtn.addEventListener(touched, function(){
createSnow('', 1);
});
</script>
</body>
</html>最后的效果：
评论 (0)