js之自定义右键菜单

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义右键菜单</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin: 0;
    padding: 0;
}
body{
    font-family:"Mrcrosoft Yahei",Arial;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    border:none;
}
    .menu{
        width: 100px;
        background: #9ff;
        position: absolute;
        left: -100%;
    }
    .uls li{
        border-bottom: 1px solid black;
        padding: 5px 0 0 5px;
        border-right: 1px solid black;
        border-left: 1px solid black;
    }
    .uls li:hover{
        background:#f9f ;
    }
    .uls li:hover a{
        color:#ff9 ;
    }
    .uls li:first-child{
        border-top: 1px solid black;
    }
    .uls a{
        display: block;
    }
</style>
</head>
<body>
    <!-- 书写自定义菜单样式 -->
    <div class="menu">
        <ul class="uls">
            <li><a href="数码时钟.html">数码时钟</a></li>
            <li><a href="留言板.html">留言板</a></li>
            <li><a href="进度条.html">进度条</a></li>
            <li><a href="随机生成二维码.html">二维码</a></li>
            <li><a href="吸顶效果.html">吸顶效果</a></li>
            <li><a href="隔行换色.html">隔行换色</a></li>
        </ul>
    </div>
    <script>
         //严格模式
        ‘use strict‘;
        //创建一个方法解决获取类名时的兼容性问题
        function byClassName(sClassName){
            if(document.getElementsByClassName){
                return document.getElementsByClassName(sClassName);
            }else{
                找到所有的元素
                var allTagName = document.getElementsByTagName(‘*‘);
                // 然后遍历
                var result = [];
                for(var i = 0;i < allTagName.length; i++){
                    // 因为一个页面中可能存在多个相同类名
                    if(allTagName[i].className ==sClassName){
                        result.push(allTagName[i]);
                    }
                }return result;

            }
        }
        var oMenu = byClassName(‘menu‘)[0];
        document.oncontextmenu = function(ev){

            // 获取事件对象
            var  e = ev || window.event;
            var iL = e.clientX,
                iT = e.clientY;
                oMenu.style.left = iL + ‘px‘;
                oMenu.style.top = iT + ‘px‘;
            // 当点击浏览器任意地方时,让菜单消失
            document.onclick = function(){
                oMenu.style.left = ‘-100%‘;
            }
            //阻止浏览器的默认行为
            return false;
        }
    </script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/bgwhite/p/9476338.html

时间: 2024-10-07 09:46:44

js之自定义右键菜单的相关文章

自定义右键菜单

自定义右键菜单 技术一般水平有限,有什么错的地方,望大家指正. 自定义右键菜单,对于一些ERP系统,功能操作比较多,所以我们通常把常用的几个功能放在自定义的右键菜单里方便用户使用. 实现自定义菜单很简单,首先我们要屏蔽原始的右键菜单,自定义菜单出现在鼠标的位置,点击隐藏自定义菜单,过程就是这样的. *{margin:0;padding:0} a{text-decoration:none} ul li{list-style:none} .menu{border:1px solid black;bo

jquery 自定义右键菜单

如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止右键默认菜单 该自定义右键菜单是基于jquery上的 html+css: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--Demo]

许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <html> 3 <head> 4 <title>右键菜单</title> 5 <s

阻止右键菜单(阻止默认事件)&amp;&amp;跟随鼠标移动(大图展示)&amp;&amp;自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS 禁止浏览器右键菜单和刷新

1 <script language="javascript"> 2 //禁止按键F5 3 document.onkeydown = function(e){ 4 e = window.event || e; 5 var keycode = e.keyCode || e.which; 6 if( keycode = 116){ 7 if(window.event){// ie 8 try{e.keyCode = 0;}catch(e){} 9 e.returnValue =

[ActionScript 3.0] 自定义右键菜单

将自定义右键菜单的一些属性和方法归纳到AddRightMenu.as,通过实例化此类,调用相关方法即可测试! 1 package 2 { 3 import flash.display.Sprite; 4 import flash.events.ContextMenuEvent; 5 import flash.net.navigateToURL; 6 import flash.net.URLRequest; 7 import flash.ui.ContextMenu; 8 import flash

【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单

连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体验,让用户使用软件更加的简便,今天我们就来基于Bootstrap来开发自己的自定义右键菜单. 一.首先,准备好自定义菜单,供单击右键展示: 菜单默认不可见,可以通过 style="display:block" 进行调试预览; <ul class="dropdown-menu

js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javascript自定义右键菜单代码

javascript自定义右键菜单代码: 右键菜单这个再熟悉不过了,使用电脑的话每天几乎都要操作上千遍右键菜单,下面分享一段自定义右键菜单的代码实例,希望能够给需要相关内容的朋友带来帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao