<body>
<input type='text'>
<button>按钮</button>
<ul class="fruit-list li">
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>鸭梨</li>
</ul>
<script>
//创建元素的节点：createElement
//创建文本节点: createTexNode
//创建添加节点:appendChild
//创建删除节点:removeChild
//制作水果列表的添加与删除
let btn = document.querySelector("button");
let ul = document.querySelector("ul");
let inp = document.querySelector("input");
let list = document.querySelectorAll(".fruit-list li")
btn.onclick = function () {
let value = inp.value;
let li = document.createElement("li");
let text = document.createTextNode(value);
ul.appendChild(li);
li.appendChild(text);
}
for (let i in list){
list[i].onclick = function() {
// console.log(i);
ul.removeChild(this);
}
}
//事件对象
// 事件监听函数的形参可以获取事件对象
// 通过事件对象可以获取鼠标坐标。
// 1，获取x坐标：e.clientx；
// 2，获取y坐标：e.clienty；<!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>
/* .box {
width: 200px;
height: 200px;
background-color: red;
} */
.picture-list img{
width: 320px;
height: 160px;
}
.big-picture img{
width: 640px;
height: 320px ;
}
.big-picture{
position: absolute;
}
</style>
</head>
<body>
<!-- <div class=" box"></div> -->
<div class=" picture-list">
<img src = "images/a.jpg" alt="">
<img src = "images/a1.jpg" alt="">
<img src = "images/a3.jpg" alt="">
</div>
<div class = "big-picture"></div>
<script>
// 事件对象的基本概念
//鼠标点击坐标显示想XY轴对应的数字
// let box = document.querySelector(".box");
// box.onclick = function (event) {
// console.log(event.clientX);
// console.log(event.clientY);
// }
// 鼠标移动时会放大
// 移入移出
let imgList = document.querySelectorAll('.picture-list img');
let bigPicture = document.querySelector('.big-picture');
let picture = document.querySelector('.picture-list');
for(let i in imgList){
imgList[i].onmouseenter = function(){
// console.log(this.src);
bigPicture.innerHTML = `<img src='${this.src}'}>`
}
imgList[i].onmouseleave = function () {
bigPicture.innerHTML = ""
}
}
picture.onmousemove = function(e){
let x = e.clientX;
let y = e.clientY;
bigPicture.style.top = y + 10 + "px";
bigPicture.style.left = x + 10 + "px";
// console.log(`x坐标是${x},y坐标是${y}`);
}
</script>
</body>