Java教程
鼠标事件和选项卡
//获取鼠标位置
// console.log(event)
// console.log(e,x,e,y)
<button value="click">单击</button> -->
<select name="" id="">
<!-- size="0"有几个显示几个 -->
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
// document.querySelector(); 对象
// document.querySelectorAll(); 数组
// console.log(ul.childNodes)文本节点
// console.log(ul.children)不包括文本节点
// 样式
// var li=document.querySelector("#li1");
// console.log(li.nextElementSibling);
// console.log(li.previousElementSibling);
// console.log(li.nextSibling);
// var li=document.querySelector("#li1");
// li.style.color="red"
// li.style.background-color="#ccc";
// 驼峰命名法
// li.style.backgroundColor="#ccc";
// li.style["background-color"]="#ccc";
// 属性 attributes
// console.log(li.id)
// console.log(li.className)
// console.log(li.attributes["data-id"].value) name value
// change 单选、条形状态改变 下拉框选项改变 文本框的值改变
// mouseover鼠标事件
// mouseout
// keydown键盘事件
// keypress
// keyup
// var btn=document.querySelector("button");
// btn.onclick=function(){
// // console.log(this.value) 交互控件的值
// }
// var li=document.querySelector("#li1");
// li.onclick=function(){
// console.log(this.innerHTML) html
// console.log(this.innerText) text
// console.log(this.outerHTML) 含有本身
<style> *{ margin: 0; padding: 0; /* position: relative; */ } body{ position: relative;
} ul{ width: 1000px; min-width: 600px; margin: 0 auto; list-style: none; display: flex; justify-content: space-between; align-items: center; } .big{ width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; }
</style> <script> window.onload=function(){ var imgs=document.querySelectorAll("li img"); var big=document.querySelector(".big"); for (let i = 0; i < imgs.length; i++) { imgs[i].onmousemove=function(e){ big.style.top=e.y+10+"px"; big.style.left=e.x+10+"px"; big.src=this.src; } imgs[i].onmouseout=function(){ big.style.display="none"; } imgs[i].onmouseenter=function(){ big.style.display="block"; } } } </script> </head> <body> <!-- ul>(li>img)*5 加回车 --> <ul> <li><img src="img/toplist_a01.jpg" alt=""></li> <li><img src="img/toplist_a02.jpg" alt=""></li> <li><img src="img/toplist_a03.jpg" alt=""></li> <li><img src="img/toplist_a04.jpg" alt=""></li> <li><img src="img/toplist_a05.jpg" alt=""></li> </ul> <img src="img/toplist_a06.jpg" alt="" class="big"> </body>
-
微服务架构中API版本控制的实践09-28
-
AI给的和自己写的Python代码，都无法改变输入框的内容，替换也不行09-28
-
Sentinel配置限流资料：新手入门教程09-27
-
Sentinel配置限流资料详解09-27
-
Sentinel限流资料：新手入门教程09-27
-
Sentinel限流资料入门详解09-26
-
Springboot框架资料：初学者入门教程09-26
-
Springboot框架资料详解：新手入门教程09-26
-
Springboot企业级开发资料：新手入门指南09-26
-
SpringBoot企业级开发资料新手指南09-26
-
Springboot微服务资料入门教程09-26
-
SpringBoot微服务资料入门指南09-26
-
Springboot项目开发资料：新手入门及初级实战教程09-26
-
Springboot项目开发资料：新手入门教程09-26
-
SpringCloud Alibaba资料入门详解09-26
