点赞动画,鼠标点击动画

发表于 2017-10-14 | 分类于前端 | 评论数： | 阅读次数：

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

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

不多说了，看下面demo

<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>

-------------本文结束感谢您的阅读-------------