JS实现兼容性好,带缓冲的动感网页右键菜单效果


Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS实现兼容性好,带缓冲的动感网页右键菜单效果。分享给大家供大家参考。具体如下:

这是一款兼容好带缓冲的动感网页右键菜单,应该来说做的非常棒,完全JavaScript的实现,我觉得挺不错,感谢作者。

运行效果截图如下:

JS实现兼容性好,带缓冲的动感网页右键菜单效果

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 #Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 #Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 #Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 #Javascript
11种ASP连接数据库的方法
Sep 18 #Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 #Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
分享PHP入门的学习方法
2007/01/02 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
js中判断控件是否存在
2010/08/25 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
js转换对象为xml
2017/02/17 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
详解python函数传参是传值还是传引用
2018/01/16 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python读写压缩文件的方法
2020/07/30 Python
企业厂务公开实施方案
2014/03/26 职场文书
公司新年寄语
2014/04/04 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2016年情人节问候语
2015/11/11 职场文书
初中思想品德教学反思
2016/02/24 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL