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 相关文章推荐
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
js中unicode转码方法详解
Oct 09 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
js如何获取网页所有图片
May 12 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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学习资料汇总与网址
2007/03/16 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP加密技术的简单实现
2016/09/04 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
使用Python神器对付12306变态验证码
2016/01/05 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
2014年机关植树节活动方案
2014/02/27 职场文书
导游个人求职信范文
2014/03/23 职场文书
合作投资意向书
2014/04/01 职场文书
学校文明单位申报材料
2014/05/06 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
课外小组活动总结
2014/08/27 职场文书
求职自我评价范文100字
2014/09/23 职场文书
贷款承诺书
2015/01/20 职场文书
公司文体活动总结
2015/05/07 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Golang并发工具Singleflight
2022/05/06 Golang