<!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. Caffe学习笔记（二）：Caffe前传与反传、损失函数、调优

    Caffe学习笔记(二):Caffe前传与反传.损失函数.调优 在caffe框架中,前传/反传(forward and backward)是一个网络中最重要的计算过程:损失函数(loss)是学习的驱动 ...

  2. 源码编译PHP提示zip错误

    本文来源:https://segmentfault.com/q/1010000002696561 /home/levi/soft/php-5.6.8/ext/zip/lib/zipint.h:118: ...

  3. swagger2 坑 记录

    swagger2 只认 @RequestMapping 注解! 不认@RestController 注解 @RestController @RequestMapping(value = "/ ...

  4. centos7.1 从源码升级安装Python3.5.2

    http://blog.csdn.net/tengyunjiawu_com/article/details/53535153 centos7.1 从源码升级安装Python3.5.2(我写的,请大家度 ...

  5. HMM代码实践

    本文主要转载于:http://www.52nlp.cn/hmm-learn-best-practices-eight-summary 这个文章是边看边实践加上自己的一些想法生成的初稿..... 状态转 ...

  6. python正则表达式 Python Re模块

    最近在学python 练习的时候随手写的,方便以后自己参考~如果能对其他同学有所帮助就再好不过了 希望大家指正哦~  我会随时整理的,先这样~ 正则表达式 1.元字符([ ]),它用来指定一个char ...

  7. 教你如何使用理解懒Redis是更好的Redis

    前言 大家都知道 Redis 是单线程的.真正的内行会告诉你,实际上 Redis 并不是完全单线程,因为在执行磁盘上的特定慢操作时会有多线程.目前为止多线程操作绝大部分集中在 I/O 上以至于在不同线 ...

  8. css 权威指南笔记

    部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支 ...

  9. ArcMap加载在线地图

    SimpleGIS 小小的SimpleGIS除了提供6大地图让人喜爱之外,更有其他的能耐同样让你爱不释手. 功能1:作为出图底图地图提供商中Bing.天地图两家提供的地图是无偏移的地图,所以可直接应用 ...

  10. DXVA2解码数据用texture纹理渲染

    FFmpeg DXVA2解码得到的数据使用surface来承载的,surface限制很多,如果能用纹理来渲染的话,那我们就可以充分开发D3D,比如可以用坐标变换来实现电子放大的功能,还可以用坐标变换来 ...