<! 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}</script></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