为网页背景添加一个点击出现不同颜色的爱心

Mruei 评论1,319字数 3889阅读12分57秒阅读模式

首先将下载的xinxin.js文件,放到主题目录js中文章源自Eight Point-http://www.8oio.com/99.html

打开主题页脚模板文件footer.php在<?php wp_footer(); ?>  上面添加以下代码文章源自Eight Point-http://www.8oio.com/99.html

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/xinxin.js"></script>

xinxin.js内容如下:文章源自Eight Point-http://www.8oio.com/99.html

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

 文章源自Eight Point-http://www.8oio.com/99.html

 文章源自Eight Point-http://www.8oio.com/99.html

 文章源自Eight Point-http://www.8oio.com/99.html

文章源自Eight Point-http://www.8oio.com/99.html文章源自Eight Point-http://www.8oio.com/99.html
继续阅读
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证