142 lines
4.1 KiB
HTML
142 lines
4.1 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>Document</title>
|
||
<style>
|
||
body {
|
||
height: 100vh;
|
||
}
|
||
|
||
body,
|
||
ul,
|
||
li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
span {
|
||
position: fixed;
|
||
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 1 获取事件； 2 绑定事件； 3 事件处理函数。
|
||
|
||
该事件：首先：是词组的每一项在鼠标点击以后能出现在屏幕：
|
||
{1、定义词组；2、获取鼠标的x、y值，为其绑定点击事件；3、用js创建span标签用来存储定义词组里面的每一项；
|
||
4、span标签出现的xy轴位置是根据鼠标决定的，所以将获取的鼠标xy值给span标签，并在html显示； }
|
||
其次：设置动画。
|
||
甲方需求：通过鼠标点击屏幕按顺序循环出现定义词组里的每一项，并且每一项都会动态的向上运动一段距离以后消失不见 -->
|
||
</body>
|
||
<script>
|
||
// 返回值
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
// 返回数组
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
|
||
var body = $('body')
|
||
var words = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
|
||
var index = 0
|
||
body.onclick = function (e) {
|
||
var {
|
||
x,
|
||
y
|
||
} = e
|
||
// console.log('1,2',x,y);
|
||
var span = document.createElement("span");
|
||
span.innerText = words[index]
|
||
console.log(span);
|
||
index += 1
|
||
if (index > 11) {
|
||
index = 0
|
||
}
|
||
|
||
span.style = `
|
||
left: ${x}px;
|
||
top: ${y}px;
|
||
`;
|
||
|
||
body.appendChild(span)
|
||
|
||
var tops = span.style.top.split('px')[0] //点击的起始位置(split字符串分割)
|
||
|
||
// 开始思考怎么做动画
|
||
//元素上移过渡动画
|
||
// function moves(){
|
||
// // console.log('span',span.style.top.split('p'));
|
||
// var tops = span.style.top.split('px')[0] //点击的起始位置(split字符串分割)
|
||
// //分步处理到目标位置
|
||
// function toTop(){
|
||
// // debugger
|
||
// var now = Number(span.style.top.split('px')[0]) //当前位置
|
||
// if(now > tops-60){
|
||
// setTimeout(()=>{
|
||
// span.style.top = `${now - 1}px`
|
||
// toTop()
|
||
// },10)
|
||
// }else{
|
||
// body.removeChild(span)
|
||
// }
|
||
// }
|
||
// toTop()
|
||
// }
|
||
|
||
|
||
|
||
// function moves() {
|
||
// var now = Number(span.style.top.split('px')[0]) //当前位置
|
||
// if (now > tops - 60) {
|
||
// setTimeout(() => {
|
||
// span.style.top = `${now - 1}px`
|
||
// moves()
|
||
// }, 5)
|
||
// } else {
|
||
// setTimeout(function(){
|
||
// body.removeChild(span)
|
||
// },100)
|
||
// }
|
||
// }
|
||
|
||
var moveId = null;//用于保存 重绘动画 id 在取消动画时需要使用
|
||
function moves() {
|
||
|
||
var now = Number(span.style.top.split('px')[0]) //当前位置
|
||
if (now > tops - 60) {
|
||
span.style.top = `${now - 1}px`
|
||
// moves()
|
||
moveId = window.requestAnimationFrame(moves)//动画＋（具体怎么处理）
|
||
} else {
|
||
window.cancelAnimationFrame(moveId)
|
||
setTimeout(function(){
|
||
body.removeChild(span)
|
||
},100)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
moves()
|
||
}
|
||
</script>
|
||
|
||
</html>
|
||
<!-- 转化为number
|
||
'12px'.split('px')
|
||
(2) ['12', '']0: "12"1: ""length: 2[[Prototype]]: Array(0)
|
||
'12px'.split('px')[0]
|
||
'12'
|
||
Number('12px'.split('px')[0])
|
||
12
|
||
Number('12')
|
||
12 --> |