博客园添加鼠标点击特效

第一步:编写js文件

第一种:社会主义核心价值观特效

var a_idx = 0;
jQuery(document).ready(function($) {$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("").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();});});
});

第二种:爱心特效

(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);

第二步:将编辑好的js文件上传到博客园文件中

上传完成后,右键复制文件链接,添加到页脚html引用该文件

第三步:页脚html引用该文件

转载于:https://www.cnblogs.com/yad123/p/11432062.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！