注册 登录
当前位置: 首页 » 开发笔记 » 详情:鼠标点击浮现随机文字

鼠标点击浮现随机文字

效果演示:进入文章页面后随意点击。

(function(texts, colors, class_name){
	document.addEventListener('click', function(e){
		var span = document.createElement('span');
		clearInterval(span.timer);
		span.innerHTML = texts[parseInt(Math.random()*texts.length)];
		span.style = 'position:absolute;pointer-events:none;cursor:none;left:' + e.pageX + 'px;top:' + e.pageY +'px;color:#' + colors[parseInt(Math.random()*colors.length)];
		document.body.appendChild(span);
		var span_top = parseInt(span.style.top);
		var opacity = getComputedStyle(span)['opacity'];
		var speed = parseInt(Math.random()*20+10);//随机10-30的速度
		span.timer = setInterval(function(){
			span_top--;
			opacity -= 0.005;
			span.style.top = span_top + 'px';
			span.style.opacity = opacity;
			if(opacity<=0){
				clearInterval(span.timer);
				document.body.removeChild(span);
			}
		}, speed);
	});	
})(['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善'], ['ee217c','3c2213','1d1c21','662e93','0f75bd','73b146','bdbec2','f1592a','c01d2e','fcb040','056839','283a8e'])

打赏支持

所有资源来源于各大网盘,本站不储存任何资源文件,只展示资源链接,侵删!
移动端浏览