兼容好帶緩沖的動感網頁右鍵菜單

2024-09-05 12:20:42

字體：大中小

來源：轉載

供稿：網友

兼容好帶緩沖的動感網頁右鍵菜單，應該來說做的非常棒，完全JavaScript的實現，我覺得挺不錯，感謝作者。

<!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=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</head><body style="width:2000px;height:800px;"><div   id="70qarhlowxag"   class="tip">右鍵點擊游覽器唄</div>	<div   class="70qarhlowxag"   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>

上一篇：實用的不規則TAB選項卡代碼

下一篇：兼容性好，自動置頂的淘寶懸浮工具欄