jquery實現在滑鼠點選處的炫酷效果

Dailoge發表於2017-06-08
jQuery

滑鼠點選一下,在滑鼠上方顯示一個愛心❤,並有慢慢向上消失的效果,如下圖噢



是不是很炫酷,直接貼程式碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>測試</title>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery.js"></script>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
</style>
<script type="text/javascript">
$(function(){
	var height=$(window).width();
	$('#test').css({
		'height':height,
	});
	var n=1;
	$('#test').click(function(e){
		if(n%2==0){
			var $i=$('<b></b>').text('你點選了一下');//雙數顯示這個
		}else{
			var $i=$('<b></b>').text('❤');//單數顯示這個
		}
		n++;
		var x=e.pageX,y=e.pageY;//獲取滑鼠點選的位置座標
		$i.css({
				"z-index": 9999,
				"top": y - 20,
				"left": x,
				"position": "absolute",
				"color": 'red',
				"font-size": 14,
			});
			$("body").append($i);
			$i.animate({
				"top": y - 180,
				"opacity": 0
			}, 1500, function() {
				$i.remove();
			});//設定動畫
	});
});
</script>
</head>
<body>
<div id="test">

</div>
</body>
</html>

這個我們就可以利用了,在油猴外掛中,新增這個指令碼(https://greasyfork.org/zh-CN/scripts/30065-%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%89%B9%E6%95%88),然後在瀏覽所有的頁面都有這個效果

比如百度:


相關文章