Block the right-click menu (block default events) && follow mouse movements (large view) && Custom Context Menu

Source: Internet
Author: User

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">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>gt;<span>//※oncontextmenu</span>Document.oncontextmenu =function (){    return false}&lt;/script&gt;</pre></body>
Follow the mouse movement (large image display)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">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:010px;} #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;d Isplay: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 (){    varALi = document.getElementsByTagName ("li"); varObig = document.getElementById ("Big"); varoloading = Obig.getelementsbytagname ("div") [0]; vari = 0;  for(i = 0; i < ali.length; i++) {Ali[i].index=i; //mouse over, preload the picture into the container and displayAli[i].onmouseover =function ()        {            varoimg = document.createelement ("img"); //picture Pre-loading            varIMG =NewImage (); IMG.SRC= OIMG.SRC = ali[ This. Index].getelementsbytagname ("img") [0].src.replace (". jpg", "_big.jpg"); //Insert Large pictureObig.appendchild (OIMG); //move mouse over style             This. ClassName = "Active"; //Show BigOBig.style.display = OLoading.style.display = "Block"; //determine if a large map is loaded successfullyImg.complete? OLoading.style.display = "None": (Oimg.onload =function() {OLoading.style.display = "none";})        }; //mouse move, big picture container follow mouse moveAli[i].onmousemove =function(event) {varEvent = Event | |window.event; variwidth = Document.documentElement.offsetWidth-Event.clientx; //set the Big Top valueOBig.style.top = Event.clienty + + "px"; //set the left value of big, and if the right display area is not enough, the larger image will be displayed on the right side of the mouse.OBig.style.left = (Iwidth < Obig.offsetwidth + Event.clientx-obig.offsetwidth-10:event.clientx + Ten) + "px";        }; //mouse away, delete large image and hide large image containerAli[i].onmouseout =function ()        {             This. ClassName = ""; OBig.style.display= "None"; //remove a large pictureobig.removechild (Obig.lastchild) }};</script>
Customizing the right-click menu
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">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;p adding: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;p adding-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 (){    varOmenu = document.getElementById ("menu"); varALi = Omenu.getelementsbytagname ("li"); //Hide the custom context menu after loadingOMenu.style.display = "None"; //Menu Mouse Move-in/move-out style     for(i = 0; i < ali.length; i++)    {        //mouse move in styleAli[i].onmouseover =function ()        {             This. ClassName = "Active"            }; //Mouse out styleAli[i].onmouseout =function ()        {             This. ClassName = ""            }    }    //Customizing MenusDocument.oncontextmenu =function(event) {varEvent = Event | |window.event; varstyle =Omenu.style; Style.display= "Block"; Style.top= Event.clienty + "px"; Style.left= Event.clientx + "px"; return false;    }; //customize menu disappears after page clickDocument.onclick =function() {OMenu.style.display= "None"        }};</script>

Block the right-click menu (block default events) && follow mouse movements (large view) && Custom Context Menu

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.