<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ver-video-cover {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 11;
}
</style>
</head>
<body>
<div class="ver-video-cover"></div>
</body>
<script type="text/javascript" src="https://lib.baomitu.com/fastclick/1.0.6/fastclick.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
// 获取随机数
function verRandomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
// 点赞动效
function likeAnimation(e) {
var randomDeg = verRandomNum(0, 45);
var $Ani = $('<img class="ver-my-zan" src="https://v.cmcc-cs.cn/ngvlcs/app/img/ver-like1.png">');
var x = e.pageX, y = e.pageY;//获取鼠标点击的位置坐标
$Ani.css({
"z-index": 30,
"top": y - 30,
"left": x - 30,
"position": "absolute",
"width": '60',
"height": '60',
"transform": "rotate(-" + randomDeg + "deg)"
});
$("body").append($Ani);
$Ani.animate({
"top": y - 180,
"width": '120',
"height": '120',
"opacity": 0
}, 1000, function () {
$Ani.remove();
});//设置动画
}
var verClickNum = 1, clickTimer = null, lastClickTime = 0;
$("body").on("click", ".ver-video-cover,.ver-my-zan", function (e) {
var nowTime = new Date().getTime();
if (nowTime - lastClickTime < 300) {
/*双击*/
verClickNum++;
lastClickTime = 0;
clickTimer && clearTimeout(clickTimer);
likeAnimation(e)
} else {
/*单击*/
lastClickTime = nowTime;
clickTimer = setTimeout(function () {
if(verClickNum > 1){
verClickNum = 1;
return;
}else {
}
}, 300);
}
});
});
</script>
</html>
jq实现双击点赞效果
最新推荐文章于 2024-07-07 11:30:00 发布