js右键菜单和右下角弹窗

时间：2022-09-05 10:33:36

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

1右键快捷菜单

  
 
 
    

  1. <script type="text/javascript"> 
    2. 
   
  
  
  2.        //右键点击  
    3. 
   
  
  
  3. 
       document.oncontextmenu = function()  

    4. 
   
  
  
  4.        {  
    5. 
   
  
  
  5.              showMenu();  
    6. 
   
  
  
  6.                return false;//屏蔽掉的右键菜单  
    7. 
   
  
  
  7.        }  
    8. 
   
  
  
  8.        function  showMenu()  
    9. 
   
  
  
  9.        {  
    10. 
   
  
  
  10.              popMenu(itemMenu,100 );  
    11. 
   
  
  
  11.                  //禁用右键  
    12. 
   
  
  
  12. 
                 event.returnValue=false;  

    13. 
   
  
  
  13.                  //不上传事件  
    14. 
   
  
  
  14. 
                 event.cancelBubble=true;  

    15. 
   
  
  
  15.                  return false;  
    16. 
   
  
  
  16.        }  
    17. 
   
  
  
  17.         //menuDiv:右键菜单的内容  
    18. 
   
  
  
  18.         //width:行显示的宽度  
    19. 
   
  
  
  19.         function popMenu(menuDiv,width ){  
    20. 
   
  
  
  20.           //创建弹出菜单  
    21. 
   
  
  
  21. 
          var pop=window.createPopup();  

    22. 
   
  
  
  22.           //设置弹出菜单的内容  
    23. 
   
  
  
  23. 
          pop.document.body.innerHTML=menuDiv .innerHTML;  

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

    25. 
   
  
  
  25.           //获得弹出菜单的行数  
    26. 
   
  
  
  26. 
          var rowCount=rowObjs.length;  

    27. 
   
  
  
  27.           //设置鼠标滑入该行时的效果  
    28. 
   
  
  
  28. 
            for(var i=0;i<rowObjs.length;i++)  

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

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

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

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

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

    36. 
   
  
  
  36.                  
    37. 
   
  
  
  37.                }  
    38. 
   
  
  
  38.              }  
    39. 
   
  
  
  39.            
    40. 
   
  
  
  40.            //屏蔽菜单的菜单  
    41. 
   
  
  
  41. 
           pop.document.oncontextmenu=function (){  

    42. 
   
  
  
  42.            return false;  
    43. 
   
  
  
  43.            }  
    44. 
   
  
  
  44.            //选择右键菜单的一项后，菜单隐藏  
    45. 
   
  
  
  45. 
           pop.document.onclick=function (){  

    46. 
   
  
  
  46.            pop.hide();  
    47. 
   
  
  
  47.            }  
    48. 
   
  
  
  48.            //显示菜单  
    49. 
   
  
  
  49.            pop.show(event.clientX-1,event.clientY,width, rowCount*50,document.body);  
    50. 
   
  
  
  50.            return true;  
    51. 
   
  
  
  51.        }  
    52. 
   
  
  
  52. 
    </script> 

    53. 
   
  
  
  53.  
    54. 
   
  
  
  54. <div id="itemMenu" style="display: none">
            <table border="1" width="100%" height="100%" bgcolor="#ff6666" style="border: thin"
                cellspacing="0">
                <tr>
                    <td style="cursor: default; border: outset 1;" align="center" onclick="parent.create(1)">
                        <img src=\'#\'" /coffee.ico" alt="下午茶" />
                    </td>
                </tr>
                <tr>
                    <td style="cursor: default; border: outset 1;" align="center" onclick="parent.create()">
                        <img src=\'#\'" /咖啡杯.ico" alt="下午茶" />
                    </td>
                </tr>
                <tr>
                    <td style="cursor: default; border: outset 1;" align="center" onclick="parent.create(3)">
                        <img src=\'#\'" /甜甜圈.ico" alt="下午茶" />
                    </td>
                </tr>
            </table>
        </div>
    55.

2右下角弹出框

  
 
 
    

  1. <script language="JavaScript" type="text/javascript">   
    2. 
   
  
  
  2.       
    3. 
   
  
  
  3.     function $(obj){   
    4. 
   
  
  
  4.         return document.getElementById(obj);   
    5. 
   
  
  
  5.     }   
    6. 
   
  
  
  6.     function pop(obj){   
    7. 
   
  
  
  7. 
        var h = parseInt($("popDiv").currentStyle.height);   

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

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

    10. 
   
  
  
  10.         {   
    11. 
   
  
  
  11.             window.clearInterval(timer);   
    12. 
   
  
  
  12. 
            $("popDiv").style.display = "none";   

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

    15. 
   
  
  
  15.             window.clearInterval(timer);   
    16. 
   
  
  
  16.         }   
    17. 
   
  
  
  17.    
    18. 
   
  
  
  18.     }   
    19. 
   
  
  
  19.        
    20. 
   
  
  
  20.     var timer;   
    21. 
   
  
  
  21.     function runtimer(obj){   
    22. 
   
  
  
  22. 
        timer = window.setInterval(function(){pop(obj)},10);   

    23. 
   
  
  
  23.     }   
    24. 
   
  
  
  24. 
    window.onload = function(){   

    25. 
   
  
  
  25.         runtimer(2);   
    26. 
   
  
  
  26.     }  
    27. 
   
  
  
  27.     //每隔10秒调用show方法，如果显示则隐藏，如果隐藏则显示   
    28. 
   
  
  
  28.      setInterval(  show ,10000 );   
    29. 
   
  
  
  29.       function show(){  
    30. 
   
  
  
  30. 
      if (  $("popDiv").style.display == "none" )  

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

    33. 
   
  
  
  33.         runtimer(2);  
    34. 
   
  
  
  34.            
    35. 
   
  
  
  35.       }   
    36. 
   
  
  
  36.       else  
    37. 
   
  
  
  37.       {  
    38. 
   
  
  
  38.           runtimer(-2);  
    39. 
   
  
  
  39.       }  
    40. 
   
  
  
  40.          
    41. 
   
  
  
  41.      }  
    42. 
   
  
  
  42. 
</script> 

    43. 
   
  
  
  43. <div style="position:absolute;right:0;bottom:0;height:0px;width:200px;border:1px solid red;" id="popDiv">     
              <table>
                 <tr>
                   <td>
                        <a href="javascript:runtimer(-2);void(0)" >工作提示</a> //点击则弹出框关闭
                   </td>
                 </tr>
              </table>
            </div> 
    44.

3向上滚动数据

  
 
 
    

  1. <script   type="text/javascript"> 
    2. 
   
  
  
  2. 
    var speed=40;//数值越大，速度越慢  

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

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

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

    6. 
   
  
  
  6. 
    demo2.innerHTML=demo1.innerHTML;  

    7. 
   
  
  
  7. 
    demodemo.scrollTop=demo.scrollHeight;  

    8. 
   
  
  
  8.     function MarqueeUp(){  
    9. 
   
  
  
  9. 
    if(demo2.offsetTop-demo.scrollTop<=0)  

    10. 
   
  
  
  10. 
    demo.scrollTop-=demo2.offsetHeight;  

    11. 
   
  
  
  11.     else{  
    12. 
   
  
  
  12.     demo.scrollTop++;  
    13. 
   
  
  
  13.     }  
    14. 
   
  
  
  14.     }  
    15. 
   
  
  
  15. 
    var MyMar=setInterval(MarqueeUp,speed);  

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

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

    18. 
   
  
  
  18. 
</script>  

    19. 
   
  
  

  19. <div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid #666;">
    <div id="demo1">
     
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    <p>这个向上滚动的文字特效JS代码比较简洁 。</p>
    </div>
    20. 
   
  
  
  20. <div id="demo2"></div>
    </div>
    21.

 

 

 

 

 

 

 

 

 

 

 

本文出自 “冬（” 博客，请务必保留此出处http://1890146.blog.51cto.com/1880146/555703

标签：

相关文章