手记

js右键菜单和右下角弹窗

几个js经常用到的功能,整理一下

1右键快捷菜单

  1. <script type="text/javascript"> 

  2.        //右键点击  

  3.        document.oncontextmenu = function()  

  4.        {  

  5.              showMenu();  

  6.                return false;//屏蔽掉的右键菜单  

  7.        }  

  8.        function  showMenu()  

  9.        {  

  10.              popMenu(itemMenu,100 );  

  11.                  //禁用右键  

  12.                  event.returnValue=false;  

  13.                  //不上传事件  

  14.                  event.cancelBubble=true;  

  15.                  return false;  

  16.        }  

  17.         //menuDiv:右键菜单的内容  

  18.         //width:行显示的宽度  

  19.         function popMenu(menuDiv,width ){  

  20.           //创建弹出菜单  

  21.           var pop=window.createPopup();  

  22.           //设置弹出菜单的内容  

  23.           pop.document.body.innerHTML=menuDiv .innerHTML;  

  24.           var rowObjs=pop.document.body.all[0].rows;  

  25.           //获得弹出菜单的行数  

  26.           var rowCount=rowObjs.length;  

  27.           //设置鼠标滑入该行时的效果  

  28.             for(var i=0;i<rowObjs.length;i++)  

  29.              {  

  30.               rowObjs[i].cells[0].onmouseover=function (){  

  31.                this.style.background="#cccccc";  

  32.                this.style.color="black";  

  33.                }  

  34.                 rowObjs[i].cells[0].onmouseout=function (){  

  35.                this.style.background="#ff6666";  

  36.                  

  37.                }  

  38.              }  

  39.            

  40.            //屏蔽菜单的菜单  

  41.            pop.document.oncontextmenu=function (){  

  42.            return false;  

  43.            }  

  44.            //选择右键菜单的一项后,菜单隐藏  

  45.            pop.document.onclick=function (){  

  46.            pop.hide();  

  47.            }  

  48.            //显示菜单  

  49.            pop.show(event.clientX-1,event.clientY,width, rowCount*50,document.body);  

  50.            return true;  

  51.        }  

  52.     </script> 

  53.  

  54. <div id="itemMenu" >
            <table border="1" width="100%" height="100%" bgcolor="#ff6666"
                cellspacing="0">
                <tr>
                    <td  align="center" onclick="parent.create(1)">
                        <img src="Jos的下午茶/coffee.ico" alt="下午茶" />
                    </td>
                </tr>
                <tr>
                    <td  align="center" onclick="parent.create()">
                        <img src="Jos的下午茶/咖啡杯.ico" alt="下午茶" />
                    </td>
                </tr>
                <tr>
                    <td  align="center" onclick="parent.create(3)">
                        <img src="Jos的下午茶/甜甜圈.ico" alt="下午茶" />
                    </td>
                </tr>
            </table>
        </div>

2右下角弹出框

  1. <script language="JavaScript" type="text/javascript">   

  2.       

  3.     function $(obj){   

  4.         return document.getElementById(obj);   

  5.     }   

  6.     function pop(obj){   

  7.         var h = parseInt($("popDiv").currentStyle.height);   

  8.         $("popDiv").style.height = (h + obj) + "px";   

  9.         if(parseInt($("popDiv").style.height) < 2)  

  10.         {   

  11.             window.clearInterval(timer);   

  12.             $("popDiv").style.display = "none";   

  13.         }   

  14.         if(parseInt($("popDiv").style.height) >= 200){   

  15.             window.clearInterval(timer);   

  16.         }   

  17.    

  18.     }   

  19.        

  20.     var timer;   

  21.     function runtimer(obj){   

  22.         timer = window.setInterval(function(){pop(obj)},10);   

  23.     }   

  24.     window.onload = function(){   

  25.         runtimer(2);   

  26.     }  

  27.     //每隔10秒调用show方法,如果显示则隐藏,如果隐藏则显示   

  28.      setInterval(  show ,10000 );   

  29.       function show(){  

  30.       if (  $("popDiv").style.display == "none" )  

  31.       {  

  32.       $("popDiv").style.display = "inline"   

  33.         runtimer(2);  

  34.            

  35.       }   

  36.       else  

  37.       {  

  38.           runtimer(-2);  

  39.       }  

  40.          

  41.      }  

  42. </script> 

  43. <div  id="popDiv">    
              <table>
                 <tr>
                   <td>
                        <a href="javascript:runtimer(-2);void(0)" >工作提示</a> //点击则弹出框关闭
                   </td>
                 </tr>
              </table>
            </div> 

3向上滚动数据

  1. <script   type="text/javascript"> 

  2.     var speed=40;//数值越大,速度越慢  

  3.     var demo2=document.getElementById("demo2");  

  4.     var demo1=document.getElementById("demo1");  

  5.     var demo=document.getElementById("demo");  

  6.     demo2.innerHTML=demo1.innerHTML;  

  7.     demodemo.scrollTop=demo.scrollHeight;  

  8.     function MarqueeUp(){  

  9.     if(demo2.offsetTop-demo.scrollTop<=0)  

  10.     demo.scrollTop-=demo2.offsetHeight;  

  11.     else{  

  12.     demo.scrollTop++;  

  13.     }  

  14.     }  

  15.     var MyMar=setInterval(MarqueeUp,speed);  

  16.     demo.onmouseover=function() {clearInterval(MyMar);}  

  17.     demo.onmouseout=function() {MyMar=setInterval(MarqueeUp,speed);}  

  18. </script>  


  19. <div id="demo" >
    <div id="demo1">
     
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    </div>

  20. <div id="demo2"></div>
    </div>

 

 

 

 

0人推荐
随时随地看视频
慕课网APP