67 lines
1.7 KiB
HTML
67 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>JS 富强明主 特效</title>
|
||
<style>
|
||
body,html{
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
span {
|
||
transition: all 0.8s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
|
||
var list = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
|
||
var body = document.querySelector("body"), index = 0;
|
||
body.onclick = function (event) {
|
||
// 获取用户鼠标点击后的坐标 x , y
|
||
var x = event.clientX;
|
||
var y = event.clientY;
|
||
// 使用 createElement 动态创建 span 标签
|
||
var span = document.createElement("span")
|
||
// 向span中追加文字信息
|
||
span.innerText = list[index];
|
||
// 设置span标签的样式
|
||
span.style = `
|
||
position: absolute;
|
||
left: ${x}px;
|
||
top: ${y}px;
|
||
opacity: 1;
|
||
`;
|
||
// 讲配置好的span标签添加到body中
|
||
body.appendChild(span);
|
||
index += 1;
|
||
// 如果index大于数组最大下表，那么将数组下表归0，从头开始
|
||
if (index > list.length-1) {
|
||
index = 0
|
||
}
|
||
RemoveChild(span,y)
|
||
}
|
||
|
||
function RemoveChild(el,top) {
|
||
// 300毫秒后开始修改span的top数值，并让 opacity 透明度设置为0
|
||
setTimeout(function() {
|
||
el.style.top = `${top - 60}px`;
|
||
el.style.opacity = '0';
|
||
},300);
|
||
|
||
// 1.3秒后删除标签
|
||
setTimeout(function(){
|
||
body.removeChild(el)
|
||
},1300);
|
||
|
||
}
|
||
</script>
|
||
</html> |