鼠标事件 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 600px;
                height: 400px;
                background: cornsilk;
                margin: 0 auto;
                transition: all .5s;
                
            }
            .circle{
                width: 5px;
                height:5px;
                border-radius:  2.5px;
                background: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            
        </div>
        <script type="text/javascript">
            var div1 = document.querySelector('.div1')
            //鼠标进入事件
            div1.onmouseenter = function(e){
                div1.style.background = 'deepskyblue'
                div1.style.color = '#fff'
                div1.innerHTML = '<h1>这是鼠标进入事件</h1>'
            }
            
            //鼠标离开事件
            div1.onmouseleave = function(){
                div1.style.background = 'sandybrown'
                div1.style.color = '#fff'
                div1.innerHTML = '<h1>这是鼠标移出事件</h1>'
            }
            
            //鼠标移动事件//
//            div1.onmousemove = function(e){
//                console.log(e)
//                console.log(e.clientX,e.clientY)
//                var newDiv = document.createElement('div')
//                newDiv.className = 'circle'
//                newDiv.style.left = e.clientX + 'px';
//                newDiv.style.top = e.clientY + 'px';
//                document.body.appendChild(newDiv)
//            }
            
            //鼠标按下事件
            div1.onmousedown = function(){
                div1.style.background = 'silver'
                div1.style.color = '#fff'
                div1.innerHTML = '<h1>这是鼠标按下事件</h1>'
            }
            
            //鼠标抬起事件
            div1.onmouseup = function(){
                div1.style.background = 'burlywood'
                div1.style.color = '#fff'
                div1.innerHTML = '<h1>这是鼠标抬起事件</h1>'
            }
            
            //鼠标滚轮事件
            div1.onmousewheel = function(e){
                console.log(e)
                div1.innerHTML = '<h1>这是鼠标滚轮事件</h1>'
            }
            
            
            
        </script>
    </body>
</html>

 

posted @ 2019-03-18 21:43  就这样子吧  阅读(159)  评论(0)    收藏  举报