68 lines
1.7 KiB
HTML
68 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Title</title>
|
||
<style>
|
||
body,html{
|
||
height: 100%;
|
||
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
</body>
|
||
<script>
|
||
|
||
// 1: 给body绑定电击事件
|
||
// 2: 获取鼠标 x,y 坐标
|
||
// 3: 使用js动态创建 标签（span），为span添加文字，设置定位 left top
|
||
// 4: 放到body
|
||
// 5：让span 运动起来 css 动画，改变 top
|
||
// 6: 最后运动完成后，让span消失（隐藏，删除）
|
||
|
||
var index = 0;
|
||
var body = document.querySelector("body");
|
||
body.onclick = function (event) {
|
||
var X = event.x,
|
||
Y = event.y;
|
||
|
||
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"];
|
||
index > 11 ? index = 0 : '';
|
||
|
||
var span = document.createElement("span");
|
||
span.innerText = Text[index];
|
||
|
||
span.style = `
|
||
position: fixed;
|
||
left: ${X}px;
|
||
top: ${Y}px;
|
||
transition: all ease 1s;
|
||
opacity: 1;
|
||
color: hsl(${parseInt(Math.random() * 360)},100%,50%);
|
||
`;
|
||
|
||
body.appendChild(span)
|
||
animation(span, Y);
|
||
index++
|
||
|
||
}
|
||
|
||
// 让span 动起来
|
||
function animation(el,y) {
|
||
// span 移动
|
||
setTimeout(function (){
|
||
el.style.opacity = 0
|
||
el.style.top = `${y - 100}px`
|
||
}, 100)
|
||
|
||
// 删除span标签
|
||
setTimeout(function (){
|
||
body.removeChild(el)
|
||
}, 1100)
|
||
}
|
||
|
||
</script>
|
||
</html> |