首页 > 编程语言 > 详细

JavaScript中的额事件二

时间:2016-02-21 12:56:08      阅读:211      评论:0      收藏:0      [点我收藏+]

JavaScript中的额事件二

 小例子:右键自定义菜单;

 html:

 <div id="div1">
      <ul id="ul1">
        <li>菜单一</li>
        <li>菜单二</li>
        <li>菜单三</li>
        <li>菜单四</li>
      </ul>
   </div>

 css:

 #div1{
     display:none;
     height:100px;
     width:80px;
     background:#ccc;
     position:absolute; 
 }
 #div1 ul{
     padding:0px;
     margin:0px;
 }
 #div1 ul li{
     margin-top:2px;
     list-style:none;
 }

 javascript:

   function getPosition(e){
       var clientx=e.clientX;
       var clienty=e.clientY;
       var scrollLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
       var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
       var x=clientx+scrollLeft;
       var y=clienty+scrollTop;
       return {x:x,y:y};
   }
   window.onload=function (){
     document.oncontextmenu=function (ev){
         var e=ev || event;
         var obj=document.getElementById("div1");
         var pos=getPosition(e);
         obj.style.left=pos.x+‘px‘;
         obj.style.top=pos.y+‘px‘;
         obj.style.display=‘block‘;
         //如果加上运动框架,我们可以做出淡入淡出的效果滴呀 
         return false;
     }
     document.onclick=function (){
       var obj=document.getElementById("div1");
       obj.style.display=‘none‘;     
     }
   }

 

效果图:

技术分享

JavaScript中的额事件二

原文:http://www.cnblogs.com/mc67/p/5204670.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!