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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
python在windows下实现备份程序实例
2014/07/04 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python线程中同步锁详解
2018/04/27 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Django admin组件的使用
2020/10/24 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
小学国旗下的演讲稿
2014/08/28 职场文书
教师先进事迹材料
2014/12/16 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python