胖不了小陆

信你所信，为你所见

0%

点赞动画,鼠标点击动画

发表于 分类于

点赞+1 动画、鼠标点击动画

原理很简单通过绝对定位 和 样式动画就可以实现了。

不多说了，看下面demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
	h1,h2{
		width:200px;
		height:30px;
		text-align:center;
		margin:200px auto;
	}
</style>
</head>
<body>
 <h1>点击屏幕看看</h1>
 <h2><a href="http://share.lrshuai.top/demo2.html">滚动条:</a></h2>
<script>
$(document).ready(function(){	
	//鼠标点击动画
	$('body').click(function(e) {
		e = e || window.event;
		xponit = e.pageX || e.clientX + document.body.scroolLeft;
		yponit = e.pageY || e.clientY + document.body.scrollTop;
		console.log("xponit",xponit);
		console.log("yponit",yponit);
		var elment = "<div class='pointanim' style='position:absolute;top:"+yponit+"px;left:"+xponit+"px;color:red;text-align:center;font-size:2em;'>+1</div>";
		$(this).append(elment);
		$(".pointanim").animate({opacity:'0.5',top:'0'},1000,remove)
		
	});
	//回调函数
	function remove(){
		 $(".pointanim").remove();
	}
	
})
</script>
</html>
您的打赏，是我创作的动力！不给钱？那我只能靠想象力充饥了。