cnblogs鼠标点击特效 - 好文

喜大普奔! 伸手党福利 !

第1步: 创建mouse.js文件, 上传到博客, 直接引用即可。

内容如下:
(function(window, document, undefined) { var hearts = [];
window.requestAnimationFrame= (function() { return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.msRequestAnimationFrame ||function
(callback) { setTimeout(callback,1000 / 60); } })(); init(); function init() {
css(".heart{width: 10px;height: 10px;position: fixed;background:
#f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform:
rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height:
inherit;background: inherit;border-radius: 50%;-webkit-border-radius:
50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top:
-5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function
gameloop() {for (var i = 0; i < hearts.length; i++) { if (hearts[i].alpha <= 0)
{ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; }
hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText= "left:" + hearts[i].x + "px;top:" + hearts[i].y +
"px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," +
hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color; }
requestAnimationFrame(gameloop); }function attachEvent() { var old = typeof
window.onclick === "function" && window.onclick; window.onclick = function
(event) { old&& old(); createHeart(event); } } function createHeart(event) { var
d = document.createElement("div"); d.className = "heart"; hearts.push({ el: d,
x: event.clientX- 5, y: event.clientY - 5, scale: 1, alpha: 1, color:
randomColor() }); document.body.appendChild(d); }function css(css) { var style
= document.createElement("style"); style.type = "text/css"; try {
style.appendChild(document.createTextNode(css)); }catch(ex) {
style.styleSheet.cssText= css; } document.getElementsByTagName('head')[0
].appendChild(style); }function randomColor() { return "rgb(" + (~~
(Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~
(Math.random() * 255)) + ")"; } })(window, document);
第2步: 页脚html引用该文件
 <script type="text/javascript" src
="https://blog-static.cnblogs.com/files/yadongliang/mouse.js"></script>
这样就ok了~

另外还发现一异常爱国的程序猿https://www.cnblogs.com/Hi-blog/p/7798940.html
<https://www.cnblogs.com/Hi-blog/p/7798940.html>:(点击后有一股把"八荣八耻"搞进来的冲动有木有!!)
var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function
(e) {var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国",
"敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) %
a.length;var x = e.pageX, y = e.pageY; $i.css({ "z-index":
999999999999999999999999999999999999999999999999999999999999999999999, "top": y
- 20, "left": x, "position": "absolute", "font-weight": "bold", "color":
"#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 },
1500, function() { $i.remove(); }); }); });

感谢

* https://www.miaomiaomiao.org/135.html
<https://www.miaomiaomiao.org/135.html>
* https://blog.csdn.net/qidu1998/article/details/79593919
<https://blog.csdn.net/qidu1998/article/details/79593919>

热门工具换一换