鼠标点击页面弹出向上飘的字符

Posted 2022-02-04 流星蝴蝶没有剑

html 源码

js源码

鼠标点击页面弹出汉字

鼠标点击弹出汉字

直接放入<script></script>标签中即可

/* 鼠标特效 */
var getRandomColor = function()    
  return  '#' +    
    (function(color)    
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
      && (color.length == 6) ?  color : arguments.callee(color);    
  )('');    
 
var shubiaoclick_idx = 0;
$shubiaoclick_new = [];
$shubiaoclick = new Array();
if (jQuery)  

 else  
	eval('');

jQuery(document).ready(function($) 
	$("body").click(function(e) 
		if($shubiaoclick_new.length) $shubiaoclick = $shubiaoclick_new;
		else
			$shubiaoclick = [
			"爱国",
			"敬业",
			"诚信",
			"友善",
			"富强",
			"民主",
			"文明",
			"和谐",
			"自由",
			"平等",
			"公正",
			"法治"];
		var $i = $("<span/>").text($shubiaoclick[shubiaoclick_idx]);
		shubiaoclick_idx = (shubiaoclick_idx + 1) % $shubiaoclick.length;
		var x = e.pageX,
		y = e.pageY;
		$i.css(
			"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
			"top": y - 20,
			"left": x,
			"position": "absolute",
			"font-weight": "bold",
			"font-size": "20px",
			"color": getRandomColor ()
		);
		$("html").append($i);
		$i.animate(
			"top": y - 180,
			"opacity": 0
			,
			1500,
			function() 
				$i.remove();
		);
	);
);