鼠标事件和选项卡

//获取鼠标位置
// 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>
posted @ 2021-11-05 22:20  与神明画过押  阅读(55)  评论(0)    收藏  举报