总感觉奇奇怪怪的……
很多 wordpress 网站都加了这个鼠标点击特效,就是在网站任意位置点击鼠标,会不断的跳出各种文字。最常见的莫过于”富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正” ,”法治”, “爱国”, “敬业”, “诚信”, “友善”这十二社会主义核心价值观。
代码如下:
<script type="text/javascript">
/* 鼠标点击特效 */
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": 999999999999999999999999999,
"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();
});
});
});
</script>
将上面的代码添加到主题页脚(footer.php)文件的 php wp_footer(); ? 前面即可。
死亡flag版
("打完这仗我就回老家结婚", "已经没什么好害怕的了", "差不多该走了", "要等我回来", "我去去就来", "你就是叫破喉咙", "我就不信,这么多人还杀不了他一个!", "干,干掉了吗?", "成功了吗?", "什么声音?去看下吧", "嗯?老鼠么", "喂老子问你话呢", "嗯?没见过的武器?", "我已经是天下无敌了!", "明天就是女儿的生日", "大丈夫だ、問題ない", "这次工作的报酬是以前无法比拟的", "我才不要和凶手呆在一个房间里", "谁敢杀我?", "过了明天就没事了", "我去插个眼。", "飞龙骑脸怎么输", "大丈夫萌大奶", "祥瑞御免", "干完这一票我就金盆洗手了", "你这家伙是什么人!", "原来是这样,得去告诉他们", "对方只有一个人,大家一起上啊!", "这里交给我,大家快走!", "是我的错觉吗?", "区区人类", "顺便一提,我家阳台不太牢固", "大人武运昌隆", "把那家伙打倒也没关系吧");
数字版
<script>
$("body").bind("click",function(e){
if($.cookie("_click_count") == null){
$.cookie("_click_count",0);
}
var _click_count = $.cookie('_click_count');
++_click_count;
$.cookie("_click_count",_click_count);
var $i = $("<b>").text("+" + (_click_count));
var x=e.pageX,y=e.pageY;
$i.css({
"z-index":99999,
"top":y-15,
"left":x,
"position":"absolute",
"color":"red"
});
$("body").append($i);
$i.animate(
{"top":y-180,"opacity":0},
1500,
function(){$i.remove();}
);
e.stopPropagation();
});
</script>
爱心版
将以下代码保存为js文件,直接引入使用
<script>
(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);
</script>
在底部footer.php文件中引用js即可
参考应用:陌小雨的博客,闲鱼博客
本文被阅读了:8,330次
你的页面真漂亮,还很可爱~
谢谢夸奖~