JS melaksanakan keserasian yang baik dan kesan menu klik kanan halaman web dinamik dengan kemahiran buffering

JS melaksanakan keserasian yang baik dan kesan menu klik kanan halaman web dinamik dengan kemahiran buffering_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 15:38:42

asal

1249 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan JS bagi kesan menu klik kanan halaman web dinamik dengan keserasian dan penimbalan yang baik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah menu klik kanan halaman web dinamik yang serasi dan harus dikatakan bahawa ia telah dilaksanakan sepenuhnya dalam JavaScript. Terima kasih kepada pengarang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-dg-right-button-menu-style-codes/

Kod khusus adalah seperti berikut:

<!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=gb2312" />
<title>右键菜单</title>
<style type="text/css">
div,body,span,ul,li {padding:0;margin:0;font-size:12px;}
ul,ol {list-style-type:none;}
#div1 {width:196px;height:296px;padding:2px;overflow:hidden;position:absolute;border:1px solid #666;left:200px;top:50px;display:none;z-index=1;-webkit-box-shadow:1px 3px 4px #888;box-shadow:1px 3px 4px #888;-moz-box-shadow:1px 3px 4px #888;}
#ul li {width:176px;height:25px;line-height:25px;cursor:pointer;overflow:hidden;padding-left:20px;}
.tip {width:500px;height:25px;font-size:20px;margin:50px 200px;color:red;}
</style>
<script type="text/javascript">
var g_oDiv={};
var oDiv=null;
var g_iSpeed=0;
var t=null;
window.onload=function(){
 opUl();
 oDiv=document.getElementById("div1");
 oDiv.style.height="0px";
 document.oncontextmenu=function(ev){
   var oEvent=window.event||ev;
   cancelDefault(oEvent);
   g_oDiv.MouseX=oEvent.clientX;
   g_oDiv.MouseY=oEvent.clientY;
   oDiv.style.left=g_oDiv.MouseX+"px";
   oDiv.style.top=g_oDiv.MouseY+"px";
   /* 初始化经过背景为空 */
   var oUl=document.getElementById("ul");
   var aLi=oUl.getElementsByTagName("li");
   for(var i=0;i<aLi.length;i++){
    aLi[i].style.background="none";
   }
   clearInterval(t);
   doDiv();
 }
 document.body.onmousedown=function(ev){
  var oEvent=window.event||ev;
  clearInterval(t);
  g_iSpeed=0;
  g_oDiv.h=0;
  oDiv.style.height=g_oDiv.h+"px";
  oDiv.style.display="none";
 }
 oDiv.onmousedown=function(ev){
  var oEvent=window.event||ev;
  oEvent.cancelBubble=true;
 }
}
function doDiv(ev){
 var oEvent=window.event||ev;
 oDiv.style.display="block";
 t=setInterval(doMove,30);
}
function doMove(){
 if(oDiv.offsetHeight>=302){
  g_iSpeed*=-0.7;
  oDiv.style.height=302+"px";
 }
 g_oDiv.h=g_iSpeed+oDiv.offsetHeight;
 g_iSpeed+=10; 
 oDiv.style.height=g_oDiv.h+"px";
}
function cancelDefault(oEvent){
 if(oEvent.preventDefault){
  oEvent.preventDefault();
 }
 else{
  oEvent.returnValue=false;
 }
}
/* 对li操作后的动作的定义 */
function opUl(){
 var oUl=document.getElementById("ul");
 var aLi=oUl.getElementsByTagName("li");
 for(var i=0;i<aLi.length;i++){
  aLi[i].aIndex=i;
  aLi[i].onmouseover=function(){
   for(j=0;j<aLi.length;j++){
    aLi[j].style.background="none";
   }
   aLi[this.aIndex].style.background="#ffbb66";
  }
  aLi[i].onclick=function(){
   clearInterval(t);
   oDiv.style.display="none";
   alert(this.innerHTML+" 你可以在这里自定义自己的方法啦");
  }
 }
}
</script>
</head>
<body style="width:2000px;height:800px;">
<div class="tip">右键点击游览器呗</div>
 <div id="div1">
  <ul id="ul">
   <li>这是第一行</li>
   <li>这是第二行</li>
   <li>这是第三行</li>
   <li>这是第四行</li>
   <li>这是第五行</li>
   <li>这是第六行</li>
   <li>这是第一行</li>
   <li>这是第二行</li>
   <li>这是第三行</li>
   <li>这是第四行</li>
   <li>这是第五行</li>
   <li>这是第六行</li>
  </ul>
 </div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.