栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js右键菜单和右下角弹窗

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js右键菜单和右下角弹窗

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

1右键快捷菜单

  1.  

  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

  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.      

  53.  


  54.        

                cellspacing="0">
               
                   
               
               
                   
               
               
                   
               
           

                       
                   

                       
                   

                       
                   

       

2右下角弹出框

  1.    

  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.  

  43.     
             


                
                  
                
             

                        工作提示 //点击则弹出框关闭
                  

             

3向上滚动数据

  1.  

  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.   




  19.  

    这个向上滚动的文字特效JS代码比较简洁 。


    这个向上滚动的文字特效JS代码比较简洁 。


    这个向上滚动的文字特效JS代码比较简洁 。


    这个向上滚动的文字特效JS代码比较简洁 。



 

 

 

 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/246955.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号