点赞+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:px;
height:px;
text-align:center;
margin:px 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'},,remove)
});
//回调函数
function remove(){
$(".pointanim").remove();
}
})
</script>
</html>
正文到此结束，觉得有帮助，点个赞可好！！！
博客：http://www.lrshuai.top/atc/show/58
![关闭windows10动画效果提升计算机性能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)