<!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>

　　

 

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

  1. js实现自定义右键菜单--兼容IE、Firefox、Chrome

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  3. html鼠标自定义右键菜单：css+js实现自定义html右键菜单

    我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...

  4. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  5. JS学习笔记 - 自定义右键菜单、文本框只能输入数字

    <script> // 事件总共有2个部分, //1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick) // 点击右键,div位置定位到鼠 ...

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

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  7. jquery 自定义右键菜单

    如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...

  8. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  9. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. HA-web-services

    一.HA部署 本次实验的程序选型为heartbeat v1 + hearesources.资源有IP和httpd,filesystem 配置HA集群的前提: (1)各节点资源一致,硬件或软件环境一致 ...

  2. android emulator 安装中文输入法

    android emulator 模拟器内置没有中文输入法,有些情况下我们需要输入正文就比较麻烦. 在模拟器的浏览器中下载输入法然后安装,会提示系统不兼容的情况. 这是由于Android应用多基于AR ...

  3. word2vector 使用方法 计算语义相似度

    参考:http://techblog.youdao.com/?p=915#LinkTarget_699word2vector是一个把词转换成词向量的一个程序,能够把词映射到K维向量空间,甚至词与词之间 ...

  4. angular指令中的scope绑定策略

    针对独立 scope,可以通过在对象中声明如何从外部传入参数.有以下三种绑定策略: @ - 使用 DOM 属性值单项绑定到指令 scope 中.此时绑定的值总是一个字符串,因为 DOM 的属性值是一个 ...

  5. Android6.0------权限申请~easypermissions

    前面写了Android6.0权限介绍和权限单个,多个申请,用的是纯Java代码,本文主要说的是借助第三方库来实现权限申请. 借助第三方库 easypermissions来申请6.0权限,Google官 ...

  6. Project facet Java 1.8 is not supported by target runtime Apache Tomcat v7.0.

    找到项目下的“.settings”

  7. HDU 4681 STRING dp+暴力。

    题意:不说了很好懂. 这题这么水= =...当时竟然没有勇气暴力搜一下.昨天(好吧前天.)比赛的时候胃疼,看到这题想了一个办法就是对每一个出现最短的C串前后连接然后对这个串求最长公共子序列.其实优化一 ...

  8. IceScrum敏捷开发工具的安装文档-官方最新版

    Welcome to the iceScrum iceScrum install guide. If you don’t want to manage your own iceScrum instal ...

  9. datagrid与DropDownList关联使用

    最近做一个页面需要用到这个两个控件,之前虽然看过,但是没有动手实践过.突然要做这么一个页面,并用上,真的有点着急.于是乎,网上疯狂找datagrid与DropDownList 的例子,找了很多很多,看 ...

  10. 个人学习jQuery笔记

    1.$(“#div1”).text()是获取id为div1的文本内容,也可以填充值 $(“#div1”).html() 是获取id 为div1的HTML内容值 也可以填充值 2.$(“#div1”)是 ...