<!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-Type" content="text/html; charset=utf-8" />

<title>阻止右键菜单（阻止默认事件）</title>

<style>

pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;}

span{color:#999;}

</style>

<script type="text/javascript">

document.oncontextmenu = function ()

{

    return false

}

</script>

</head>

<body>

<pre>

&lt;script type="text/javascript"&gt;

<span>//※oncontextmenu</span>

document.oncontextmenu = function ()

{

    return false

}

&lt;/script&gt;

</pre>

</body>

</html>
跟随鼠标移动（大图展示）
<!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-Type" content="text/html; charset=utf-8" />

<title>跟随鼠标移动（大图展示）</title>

<style type="text/css">

html,body{overflow:hidden;}

body,div,ul,li{margin:0;padding:0;}

#box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;}

#box li{float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;}

#box li.active{border:1px solid #a10000;}

#box li img{width:170px;height:170px;vertical-align:top;}

#big{position:absolute;width:400px;height:400px;border:2px solid #ddd;display:none;}

#big div{position:absolute;top:0;left:0;width:400px;height:400px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(img/loading.gif) 50% 50% no-repeat;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var aLi = document.getElementsByTagName("li");

    var oBig = document.getElementById("big");

    var oLoading = oBig.getElementsByTagName("div")[0];

    var i = 0;

    for (i = 0; i < aLi.length; i++)

    {

        aLi[i].index = i;

        //鼠标划过, 预加载图片插入容器并显示

        aLi[i].onmouseover = function ()

        {

            var oImg = document.createElement("img");

            //图片预加载

            var img = new Image();

            img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");

            //插入大图片

            oBig.appendChild(oImg);

            //鼠标移过样式

            this.className = "active";

            //显示big

            oBig.style.display = oLoading.style.display = "block";

            //判断大图是否加载成功

            img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";})

        };

        //鼠标移动, 大图容器跟随鼠标移动

        aLi[i].onmousemove = function (event)

        {

            var event = event || window.event;

            var iWidth = document.documentElement.offsetWidth - event.clientX;

            //设置big的top值

            oBig.style.top = event.clientY + 20 + "px";

            //设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.

            oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

        };

        //鼠标离开, 删除大图并隐藏大图容器

        aLi[i].onmouseout = function ()

        {

            this.className = "";

            oBig.style.display = "none";

            //移除大图片

            oBig.removeChild(oBig.lastChild)

        }

    }

};

</script>

</head>

<body>

<div id="box">

    <ul>

        <li><img src="img/shirt_1.jpg" /></li>

        <li><img src="img/shirt_2.jpg" /></li>

        <li><img src="img/shirt_3.jpg" /></li>

        <li><img src="img/shirt_4.jpg" /></li>

    </ul>

</div>

<div id="big"><div></div></div>

</body>

</html>
自定义右键菜单
<!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-Type" content="text/html; charset=utf-8" />

<title>自定义右键菜单</title>

<style type="text/css">

body,ul,li{margin:0;padding:0;}

body{font:12px/24px arial;}

#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}

#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}

#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}

#menu li.active{background:#999;}

#menu li.active a{color:#fff;background:#8f8f8f;}

#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;}

#menu li em.cur{background-position:0 0;}

#menu li em.copy{background-position:0 -24px;}

#menu li em.paste{background-position:0 -48px;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oMenu = document.getElementById("menu");

    var aLi = oMenu.getElementsByTagName("li");

    //加载后隐藏自定义右键菜单

    oMenu.style.display = "none";

    //菜单鼠标移入/移出样式

    for (i = 0; i < aLi.length; i++)

    {

        //鼠标移入样式

        aLi[i].onmouseover = function ()

        {

            this.className = "active"

        };

        //鼠标移出样式

        aLi[i].onmouseout = function ()

        {

            this.className = ""

        }

    }

    //自定义菜单

    document.oncontextmenu = function (event)

    {

        var event = event || window.event;

        var style = oMenu.style;

        style.display = "block";

        style.top = event.clientY + "px";

        style.left = event.clientX + "px";

        return false;

    };

    //页面点击后自定义菜单消失

    document.onclick = function ()

    {

        oMenu.style.display = "none"

    }

};

</script>

</head>

<body>

<center>自定义右键菜单，请在页面点击右键查看效果。</center>

<ul id="menu">

    <li><em class="cut"></em><a href="javascript:;">剪切</a></li>

    <li><em class="copy"></em><a href="javascript:;">复制</a></li>

    <li><em class="paste"></em><a href="javascript:;">粘贴</a></li>

</ul>

</body>

</html>

阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单的更多相关文章

  1. js去掉浏览器右键点击默认事件（+vue项目开启右键行为）

    js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...

  2. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. 阻止a标签的默认事件及延伸

    先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  4. JS阻止冒泡和取消默认事件(默认行为)

    本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...

  5. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  6. js阻止元素的默认事件与冒泡事件

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认 ...

  7. javascript -- 阻止默认事件 阻止事件冒泡

    1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: ...

  8. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  9. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  10. js禁止默认的右键菜单或出现自定义右键菜单

    1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...

随机推荐

  1. getElementsByName

    name属性,name属性是input标签的内建属性,早期浏览器的getElementsByName方法是为了方便的获取用户的输入.由于name只是input的内建属性,其它标签没有,所以getEle ...

  2. php格式化时间

    1.Y 年份的四位数 2.m 月份的数字(01-12) 3.d 一个月中的第几天(01-31) 4.w 星期几的数字表示(0-6) 5.H 24小时制(00-23) 6.i 分(00-59) 7.s ...

  3. SD卡给MCU升级

    目 录1. 前言2. 初识BootLoader2.1 百度百科的BootLoader2.2 BootLoader的简单理解2.3 BootLoader的作用3. BootLoader预备知识3.1 复 ...

  4. Quartus2 通过Nativelink调用modelsim进行功能仿真(转载)

    quartus2建立工程后,编译并检查语法通过后(功能仿真都不需要综合) tips:这样你的工程层次化也同时完成了. 打开Assignment -> settings, 找到Simulation ...

  5. xen 保存快照的实现之 —— device model 状态保存

    xen 保存快照的实现之 —— device model 状态保存 实现要点: 设备状态保存在 /var/lib/xen/qemu-save.x 文件这个文件由 qemu-dm 产生,也由 qemu- ...

  6. Mac下jdk多版本管理

    网上试了.bash_profile中增加路径设置别名的方法,但是始终无法切换,只能使用jenv了. 1. 下载 jenv(来自官网) git clone https://github.com/gcui ...

  7. Centos 6.3防火墙端口放行

    vi /etc/sysconfig/iptables #防火墙增加 -A INPUT -p tcp -m state --state NEW -m tcp --dport -j ACCEPT serv ...

  8. js5秒后自动关闭本页面及5秒钟后自动跳转指定页面的方法

    5秒钟后自动关闭 <!DOCTYPE HTML> <html> <head> <title>倒计时自动关闭/跳转页面</title> < ...

  9. (1)oracle安装、卸载、启动、关闭、登陆以及同时遇到的问题

    数据库概念 在oracle里数据库是一个静态的概念,数据库的资料保存在硬盘上,一个数据库可以有多个实例 数据库实例 数据库实例是一个动态的概念,它是进程+这个进程的内存块.就把它当成个指针吧,这个指针 ...

  10. kibana- Timelion

    1. Visualize 新建图形 2. 选择图形类型 3. 选择索引 4. 设置Timelion表达式 5. 保存图形