兼容好带缓冲的动感网页右键菜单

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 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>

上一篇：实用的不规则TAB选项卡代码

下一篇：兼容性好，自动置顶的淘宝悬浮工具栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注