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 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
小程序点击图片实现png转jpg
Oct 22 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
javascript控制台详解
2015/06/25 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
Vue之Watcher源码解析(2)
2017/07/19 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
JS实现简易日历效果
2021/01/25 Javascript
python 提取文件的小程序
2009/07/29 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python3实现转换Image图片格式
2018/06/21 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python logging模块原理解析及应用
2020/08/13 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
《燕子专列》教学反思
2014/02/21 职场文书
项目投资合作意向书
2014/07/29 职场文书
支部书记四风对照材料
2014/08/28 职场文书