昨天刚申请成功JS权限，心血来潮想添加点东西，记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”，自己也来搞一个。没有用jquery啥的框架，原生js写起来麻烦了点，不过主要是怕博客首页加载不进去jquery所以先这么着试试，意料之中没有问题。
效果如下：
话不多说了，先添加css代码，主要是用来画“小心心”的：
1 body {position: relative;} 2 .img { 20px;height: 20px;opacity: 1;position: absolute;z-index: 100000;transition: 1s;} 3 .left,.right { 10px;height: 10px;border-radius: 100%;position: absolute;} 4 .right {right: 0;} 5 .under { 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)} 6 .text { 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;}
啰嗦几句，我添加在页面定制css代码 那个文本框里面没有生效，于是乎干脆在侧边栏公告代码 中添加style标签后添加css就好了：
1 <style> 2 body{ 3 position:relative; 4 } 5 .img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 100000;transition: 1s;} 6 .left,.right {width: 10px;height: 10px;border-radius: 100%;position: absolute;} 7 .right {right: 0;} 8 .under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)} 9 .text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;} 10 </style> 11 <script>
接下来是js：
1 <script> 2 // 点击出的文字数组，可自行添加，不要太多哦 3 text = ["你好呀~", "点我呀~", "啦啦啦~", "哎呀呀~", "求关注~", "帅哥美女~", "哦~", "咦~"]; 4 // 计数 5 var count = 0; 6 // 鼠标按下事件 7 document.body.onmousedown = function (e) { 8 // 获取鼠标点击位置 9 var x = event.pageX - 18; 10 var y = event.pageY - 30; 11 // 分别创建所需要的元素节点 12 var img = document.createElement("div"); 13 var left = document.createElement("div"); 14 var right = document.createElement("div"); 15 var under = document.createElement("div"); 16 var txt = document.createElement("div"); 17 // 通过随机数从文字数组中获取随机下标的文字 18 var textNode = document.createTextNode(text[parseInt(Math.random() * text.length)]); 19 // 文字添加到txt节点中 20 txt.appendChild(textNode); 21 22 img.className = "img" + " " + "img" + count; 23 left.className = "left"; 24 right.className = "right"; 25 under.className = "under"; 26 txt.className = "text"; 27 img.style.top = y + "px"; 28 img.style.left = x + "px"; 29 // 将创建的元素添加到容器中 30 img.appendChild(left); 31 img.appendChild(right); 32 img.appendChild(under); 33 img.appendChild(txt); 34 document.body.appendChild(img); 35 // 获取随机颜色 36 var color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + 37 parseInt(Math.random() * 255) + ")"; 38 txt.style.color=color; 39 for (var i = 0; i < 3; i++) { 40 img.children[i].style.background = color; 41 } 42 } 43 // 鼠标抬起事件 44 document.body.onmouseup = function () { 45 document.getElementsByClassName("img" + count)[0].style.transform = "scale(0.5)"; 46 document.getElementsByClassName("img" + count)[0].style.transform = "translateY(-40px)"; 47 document.getElementsByClassName("img" + count)[0].style.opacity = "0"; 48 count++; 49 } 50 </script>
到这就没了，不过等下，想添加这些东西在你的博客首页上生效，你得先申请博客园的js权限呀 = =