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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Jos的下午茶/coffee.ico" alt="下午茶" />
                    </td>
                </tr>
                <tr>
                    <td  align="center" onclick="parent.create()">
                        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Jos的下午茶/咖啡杯.ico" alt="下午茶" />
                    </td>
                </tr>
                <tr>
                    <td  align="center" onclick="parent.create(3)">
                        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>