JS实现兼容性好,带缓冲的动感网页右键菜单效果
本文实例讲述了JS实现兼容性好,带缓冲的动感网页右键菜单效果。分享给大家供大家参考。具体如下：
这是一款兼容好带缓冲的动感网页右键菜单，应该来说做的非常棒，完全JavaScript的实现，我觉得挺不错，感谢作者。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-dg-right-button-menu-style-codes/
具体代码如下：
<!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>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关推荐
-
ExtJs grid行 右键菜单的两种方法
在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
JS实现仿Windows7风格的网页右键菜单效果代码
本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm
-
JS实现不使用图片仿Windows右键菜单效果代码
本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码.分享给大家供大家参考,具体如下: 这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>极酷的多级右
-
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
本文实例讲述了JS实现的仿东京商城菜单.仿Win右键菜单及仿淘宝TAB特效.分享给大家供大家参考.具体如下: 这是一个非常好的实用菜单整合特效,有多级下拉菜单.仿东京商城的拉出式菜单.仿Windows的右键菜单,仿淘宝的标签Tab菜单,每一个都是精彩,代码中附有丰富的注释,便于你的学习和修改. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-jd-taobao-win-rbutton-tab-demo/ 具体代码如下: <!DOCTYP
-
js右键菜单效果代码
将以下代码添加到<head>与</head>之间 ---------------------------------- <script language='javascript'> /*******以下内容可以修改***************/ var mname=new Array( "首 页", "修 改", "下 载", "删 除", "新 建&q
-
js实现的XP风格的右键菜单
使用说明: 在使用前,先建立菜单对象 var obj = new MouseMenu("obj"); 注意,obj 要和 MouseMenu("obj") 的obj 相同 如建立了 obj 那么 obj 将会有以下方法,开始 obj.length = 0 方法: 1. addMenu(express[,icon][,url][,target][,title]); 功能: 插入一个菜单,并且 返回一个功能和上面说 提起的 obj 一样的菜单对象 obj[
-
js禁止页面复制功能禁用页面右键菜单示例代码
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在
-
利用JS重写Cognos右键菜单的实现代码
复制代码 代码如下: <!--菜单样式--> <STYLE type=text/css> .cMenu { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 14px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 150px; CURSOR: default; COLO
-
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)
里面的代码修改也比较简单. ddd .DreamMenu { position:absolute; visibility:hidden; z-index:100; overflow:hidden; width:150px; background-color:buttonface; border:dimgray 1px solid !important; border:buttonhighlight menu menu buttonhighlight 2px outset; padding:1px