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

Posted 流星蝴蝶没有剑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标点击页面弹出向上飘的字符相关的知识,希望对你有一定的参考价值。

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

以上是关于鼠标点击页面弹出向上飘的字符的主要内容,如果未能解决你的问题,请参考以下文章

向上和向下的箭头怎么输入?

检测用户的意图是点击还是在触觉设备上向上/向下滚动页面

实现ElementUI的Dialog弹出后鼠标可以点击底层页面

如何用excel电子表格做仓库的出入库

鼠标点击效果

鼠标点击特效js代码