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>
这篇关于鼠标事件和选项卡的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航