<!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. UVA 1213 Sum of Different Primes（经典dp）

    题意:选择k(k<15)个唯一质数,求出和为n(n<1121)的可能数 题解:预处理dp,dp[k][n]表示使用k个素数拼成n的总方案数 就是三重枚举,枚举k,枚举n,枚举小于n的素数 ...

  2. Springboot依赖注入笔记

    结合Autowired和Service注解 public interface IUser { void say(); } @Service public class Student implement ...

  3. zoom:1;

    zoom:1;属性是IE浏览器的专有属性,可以设置或检索对象的缩放比例.触发ie的hasLayout属性.清除浮动.清除magin的重叠等. 注意:它未通过W3C验证.

  4. 关于Java中常用加密/解密方法的实现

    安全问题已经成为一个越来越重要的问题,在Java中如何对重要数据进行加密解密是本文的主要内容. 一.常用的加密/解密算法 1.Base64 严格来说Base64并不是一种加密/解密算法,而是一种编码方 ...

  5. JQuery常用和很有用处的方法

    1.grep()方法: 用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数 ...

  6. panda 函数-处理空值

    今天这里谈的函数,以后进行数据分析的时候会经常用到. import numpy as npimport pandas as pdfrom pandas import DataFrame , Serie ...

  7. 利用python 模块读取csv文件信息

    还有一个比较简单的方法 # -*- coding=utf-8 -*- import pandas as pddf = pd.read_csv("20170320094630.csv" ...

  8. python 中str format 格式化数字补0方法

      >>> "{0:03d}".format(1)'001'>>> "{0:03d}".format(10)'010'> ...

  9. S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则

    注:以下图片均来自<如何向妻子解释OOD>译文链接:http://www.cnblogs.com/niyw/archive/2011/01/25/1940603.html      < ...

  10. CentOS 7添加应用快捷方式到桌面

    以eclipse为例,编辑下面文件,复制到桌面即可. vi client.desktop [Desktop Entry]Encoding=UTF-8Name=eclipseExec=/home/clo ...