zoukankan      html  css  js  c++  java
  • Js-右键事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>鼠标右键事件</title>
        <style>
            *{margin:0px;padding:0px;list-style:none;}
    
            #uls{
                130px;
                height:auto;
                border:solid 1px #333;
                display:none;
                position:absolute;
            }
    
            #uls a{
                text-decoration:none;
                line-height:30px;
                text-align:center;
                display:block;
            }
    
            #uls li{
                130px;
                height:30px;
                border:solid 1px #eee;
    
            }
    
    
        </style>
    </head>
    <body>
    
        <ul id='uls'>
            <li><a href="">军事</a></li>
            <li><a href="">科技</a></li>
            <li><a href="">美女</a></li>
            <li><a href="">生活</a></li>
            <li><a href="">体育</a></li>
        </ul>
    
    
        <script>
        
        var uls = document.getElementById('uls');
    
        var lis = document.getElementsByTagName('li');
    
    
        window.oncontextmenu = function(e)
        {
            //获取x和y坐标
            var x = e.clientX;
            var y = e.clientY;
    
            // console.log(x,y);
            uls.style.left = x+'px';
            uls.style.top = y+'px';
    
            uls.style.display = 'block';
    
    
            return false;
    
        }
    
        for (var i = 0; i < lis.length; i++) {
            //鼠标移上去
            lis[i].onmouseover = function(){
    
                this.style.background='#ddd';
                var as = this.children;
    
                for (var i = 0; i < as.length; i++) {
                    as[i].style.color = 'red';
                }
    
            }
    
            //鼠标移出来
            lis[i].onmouseout = function(){
    
                this.style.background=null;
    
                var as = this.children;
    
                for (var i = 0; i < as.length; i++) {
                    as[i].style.color = '';
                }
    
            }
        }
    
        window.onclick = function(){
    
            uls.style.display = 'none';
        }
    
        </script>
    </body>
    </html>
  • 相关阅读:
    ConcurrentSkipListMap 源码分析
    ConcurrentHashMap 源码分析
    CopyOnWriteArrayList 源码分析
    AtomicBoolean 源码分析
    commons-lang3-3.4.jar
    Effective Java
    FindBugs Bug Descriptions
    EasyMock
    Apache Maven 入门
    Eclipse
  • 原文地址:https://www.cnblogs.com/yuxiang-qiwa/p/8195726.html
Copyright © 2011-2022 走看看