js 点击浮现文字动画
2020-03-25 本文已影响0人
前端架构师陈龙威
效果：
浮现文字动画
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>shehifjdslkfdsajlkfjdsalkfjdsalkjflkdsjlkfjsdlfjlkjlk</p>
<script>
$(function(){
let arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"],
arrLength = arr.length,
arrIndex = 0;
$('body').click(function(e) {
console.log(1)
arrIndex = Math.floor(Math.random()*arrLength);
let spanDom = document.createElement('span');
let x = e.pageX;
let y = e.pageY;
spanDom.innerText = arr[arrIndex];
$(spanDom).css({
'z-index': 9999,
'top': y-20,
'left': x,
'position': 'absolute',
'font-weight': 'bold',
'color': 'red',
'user-select': 'none'
});
$('body').append(spanDom);
$(spanDom).animate({
'top': y-180,
'opacity': 0
},1500,function(){
spanDom.remove()
})
})
})
</script>
</body>
</html>
