JS鼠标事件实现动效

Afengzhenguang

已于 2022-03-14 10:02:26 修改

阅读量506

点赞数

文章标签： javascript html css3

于 2022-03-12 11:43:20 首次发布

本文链接：https://blog.csdn.net/Afengzhenguang/article/details/123439564

版权

1 JS鼠标事件

click鼠标点击事件

事件对象.onclick=function() {

}

mousedown / mouseup 鼠标按下/松开事件

事件对象.onmousedown =function() {

}

mouseenter / mouseleave 鼠标移入/移出事件
mouseover / mouseout 鼠标移入移出
mousemove 鼠标移动事件
mousewheel 滚轮滚动事件
注：mouseover / mouseout事件支持事件冒泡， mouseenter / mouseleave 事件不支持事件冒泡

利用鼠标移入事件实现如下效果

在这里插入图片描述
CSS

 <style>
        body {
            background-color: #000;
        }
        
        .box {
            width: 280px;
            /* height: 300px; */
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
        }
        
        .box_item {
            width: 10px;
            height: 10px;
            margin: 2px;
            background-color: #333;
            transition: all 0.5s;
        }
    </style>

HTML

  <div class="box"></div>

<script>
        let box = document.querySelector('.box')


        let html = ''
        for (i = 0; i < 600; i++) {
            html += `<div class='box_item'></div>`
        }

        box.innerHTML = html

        let boxItemList = document.querySelectorAll('.box_item')

        for (i = 0; i < boxItemList.length; i++)
            boxItemList[i].onmouseenter = function() {
                let r = Math.floor(Math.random() * 255 + 1)
                let g = Math.floor(Math.random() * 255 + 1)
                let b = Math.floor(Math.random() * 255 + 1)
                let thisobj = this
                thisobj.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'

                setTimeout(function() {
                    console.log(thisobj)
                    thisobj.style.backgroundColor = '#333'
                }, 500)
            }
    </script>