博客园装修 js动态点击效果 一个运动的小心心加文字
之前看见别人家的博客有鼠标点击处出现一颗小心心 ，我的没有 ，很伤心……，在网上找资源，没找到源码，更伤心了……
于是自己用原生js写了一个点击的效果 ，后来学jquery的时候改了一下下，改成jquery代码，准备上传原生的代码的 ，结果找不到了 ，emmm……于是就是他了。
废话少说，上代码：
<script type="text/javascript">
// var animate = new this.myPlugin.Animate({
// duration: 30, //间隔时间
// total: 3000, //运动总时间
// begin: { //运动要改变的起始值
// a: 50,
// b: 50,
// c: 100,
// },
// end: { //运动改变的结束值
// a: 200,
// b: 400,
// c: 1000,
// },
// onstart: function () { //动画开始时触发的事件
// console.log("kaishi");
// },
// onmove: function () { //动画进行时触发的事件（每一次改变）
// div.style.width = this.curData.a + "px";
// div.style.height = this.curData.b + "px";
// // console.log("2222");
// },
// onover: function () { //动画结束时触发的事件（常常用来再次触发）
// console.log("jieshu");
// }
// });
if (!this.myPlugin) {
this.myPlugin = {}
}
/**
* obj2混合到obj1中去 相同的属性 用obj2中的覆盖obj1中的
*/
this.myPlugin.mixin = function (obj1, obj2) {
var newObj = {}; //创建新的对象
for (var prop in obj2) { //循环遍历obj2
newObj[prop] = obj2[prop]; //将obj2中的属性名和值依次赋给新对象
}
for (var prop in obj1) { //循环遍历obj1
if (!(prop in obj2)) { //判断obj1中的prop属性名不在obj2中
newObj[prop] = obj1[prop];
}
}
return newObj; //返回新对象
}
//静态方法 var obj = Object.assign(obj1,obj2); //将obj2混合到obj1中去 （会导致obj1发生变化）
// 也可以加obj3 意思是都混合到第一个obj1中去 var obj = Object.assign(obj1,obj2，obj3);
// var obj = Object.assign({},obj1,obj2); 返回的总是第一个
/**
* 浅层克隆一个对象
* @param {boolean} deep 是否深度克隆
*/
this.myPlugin.clone = function (obj, deep) {
if (Array.isArray(obj)) { // 判断是否为数组
if (deep) {
var newArr = [];
for (var i = 0; i < obj.length; i++) {
newArr.push(this.clone(obj[i], deep)); //利用递归来深度克隆
}
return newArr;
} else {
return obj.slice(); // 复制一个数组
}
} else if (typeof (obj) === "object") { //判断是否为对象
var newObj = {};
for (var prop in obj) {
if (deep) { //是否深度克隆
newObj[prop] = this.clone(obj[prop], deep); //利用递归来深度克隆
} else {
newObj[prop] = obj[prop];
}
}
return newObj;
} else { // 是函数或者原始值的情况
return obj; //递归终止条件
}
}
/**
* 动画
* @param {object} option 配置对象
*/
this.myPlugin.Animate = function (option) {
// 默认配置
var defaultOption = {
duration: 16, //默认间隔时间
total: 1000, //运动总时间
}
//此句要heloers.js中的方法 将第二个参数混合到第一个参数中
this.option = myPlugin.mixin(defaultOption, option);
//运动总次数
this.number = Math.ceil(this.option.total / this.option.duration);
//每一次运动的距离
this.everyDistance = {};
for (var prop in this.option.begin) {
this.everyDistance[prop] = (this.option.end[prop] - this.option.begin[prop]) / this.number;
}
//当前运动到了第多少次
this.curNumber = 0;
//定时器的开关
this.timers = null;
//克隆一份初始的begin对象的属性
this.curData = myPlugin.clone(this.option.begin);
}
/**
* 写在原型链上 动画的函数
*/
this.myPlugin.Animate.prototype.start = function () {
//在计时器中 事件是由window调用的 所以要先固定this的指向
var that = this;
if (this.timers || this.curNumber === this.number) {
return; //如果之前已经存在计时器，则不做任何处理
}
//当有给onstart函数时将其的this指向固定
if (this.option.onstart) {
this.option.onstart.call(that);
}
this.timers = setInterval(function () {
that.curNumber++;
// console.log(that.curNumber);
for (var prop in that.curData) {
that.curData[prop] += that.everyDistance[prop];
}
if (that.option.onmove) {
that.option.onmove.call(that);
}
// console.log(that.curNumber);
// console.log(that.curNumber);
//当事件触发次数达到预期值时 停止计时器
if (that.curNumber === that.number) {
//为了解决 js的小数运算不精确的问题
for (var prop in that.option.begin) {
that.curData[prop] = that.option.end[prop];
}
// console.log("444");
that.stop();
// this.timers = null;
}
//当有给onmove函数时将其的this指向固定
}, this.option.duration);
}
// 动画停止的事件
this.myPlugin.Animate.prototype.stop = function () {
clearInterval(this.timers);
this.timers = null;
//当有给onover函数时将其的this指向固定
if (this.option.onover) {
this.option.onover.call(this);
}
}
// 点击小心心需要用到mouseclick.css、
// 本js文件 、
// animate.js 、
// jquery.js
// 和网上的iconfont心心文件
// 思路：我是在点击时，创建了两个span元素，
// 定位是外层的定位body 内层的定位是参照外层的，
// 一个元素装的是心心的文字，内层的是放在上面的 ，
// 内层span的内容是：创建一个数组在数组中随机选取文字加入其中，
// 两个span的颜色都是统一且随机的，
// 然后将两个span加入到body中最下面 但是设置了z-index 所以在最前面，
// 然后利用我之前做好的动画插件 ，在一秒内匀速改变top、opacity的值，
// 在动画结束时销毁所创建的两个span元素
/**
* 得到一个最小值到最大值之间的随机整数
* @param {*} min 最小值
* @param {*} max 最大值
*/
function getRandom(min, max) {
return Math.floor(Math.random() * (max + 1 - min) + min);
}
/**
* 主函数
*/
$(document).ready(function () {
// 点击事件
$("body").click(function (e) {
var arr_text = ["你好呀~", "哈喽~", "谢谢啦~",
"点我呀~", "啦啦啦~", "哎呀呀~", "哈哈哈~", "萨瓦迪卡~"];
var $span = $("<span class='iconfont'></span>");
var $top_span = $("<span class='top_span'></span>");
// 获取鼠标点击处的坐标
var Y = e.pageY;
var X = e.pageX;
// 给内层span加文字
$top_span.text(arr_text[getRandom(0, arr_text.length - 1)]);
$span.append($top_span);
$($top_span).css({
"display": "inline-block",
"font-size": 12 + "px",
"position": "absolute",
"left": -10 + "px",
"top": -14 + "px",
"width": 50 + "px",
})
// console.log($(".top_span"));
$($span).css({
// "width": 20,
// "heigth": 20,
"color": "rgb(" + ~~(getRandom(50, 255))
+ "," + ~~(getRandom(50, 255))
+ "," + (getRandom(50, 255))
+ ")",
"z-index": 1,
"position": "absolute",
"left": (X - 7) + "px",
"top": (Y - 10) + "px",
"cursor": "pointer",
});
$("body").append($span);
// 动画函数 ，要注意this指向
var animate = new window.myPlugin.Animate({
duration: 20, //间隔时间
total: 1000, //运动总时间
begin: { //运动要改变的起始值
a: (Y - 10),
b: 1,
},
end: { //运动改变的结束值
a: (Y - 10 - 50),
b: 0,
},
onstart: function () { //动画开始时触发的事件
// console.log("kaishi");
},
onmove: function () { //动画进行时触发的事件（每一次改变）
$span.css("top", this.curData.a + "px");
$span.css("opacity", this.curData.b);
},
onover: function () { //动画结束时触发的事件（常常用来再次触发）
$span.remove();
}
});
animate.start(); //开始动画函数
});
});
</script>
放在这就行 当然要申请js权限先：
之前是分开放在了几个js文件里面，刚刚稍微整合了一下，空格分开了 ，全部复制粘贴就完事了 ，很方便
接下来讲讲配置的事：
这里是配置小心心运动的速率和存在的时间（从出现到消失（实际上是销毁，我用的是销毁了也可以弄个数组来依次隐藏，题外话了，））
还有两个配置一个是文字：
在这个里面增加或者修改文字就行，会随机出现
还有一个是心心的颜色范围：
虽然是随机颜色，也可以设置随机的范围
