AI智能
改变未来

使用jQuery实现右键菜单

var arr = [\"新建\", \"复制\", \"剪切\", \"粘贴\", \"删除\"];var cloneDiv,selectDiv;var ul=$(\"<ul></ul>\").appendTo(\"body\").css({listStyle: \"none\",margin: 0,padding: 0,position: \"absolute\",display: \"none\",zIndex: 999,}).mouseleave(function(){$(this).css(\"display\",\"none\");});$.each(arr,function(index,item){$(\"<li></li>\").appendTo(ul).css({padding: \"5px 15px\",backgroundColor: \"skyblue\",userSelect: \"none\",}).text(item).hover(function(){$(this).css(\"backgroundColor\", \"blue\");},function(){$(this).css(\"backgroundColor\", \"skyblue\");}).click(function(e){switch(arr.indexOf($(this).text())){case 0:var col=\"#\";for(var i=0;i<6;i++){col+=Math.floor(Math.random()*16).toString(16);}$(\"<div></div>\").appendTo(\"body\").css({width: 50,height: 50,backgroundColor: \"red\",position: \"absolute\",left: e.clientX - 25,top: e.clientY - 25,}).click(function(){selectDiv=$(this);selectDiv.css(\"border\", \"1px solid #000000\").mousedown(function(e){var div=$(this);e.preventDefault();$(document).mousemove(function(e1){div.css({left: e1.clientX - e.offsetX,top: e1.clientY - e.offsetY,});}).mouseup(function(){$(this).off(\"mousemove mouseup\");})}).siblings(\"div\").css(\"border\",\"none\").off(\"mousedown\");});break;case 1:cloneDiv=selectDiv.clone(true);break;case 2:cloneDiv=selectDiv.clone(true);selectDiv.remove();selectDiv=null;break;case 3:if(!cloneDiv) return;selectDiv=cloneDiv;selectDiv.appendTo(\"body\").css({left: e.clientX - 25,top: e.clientY - 25,}).siblings(\"div\").css(\"border\",\"none\");cloneDiv=null;break;case 4:selectDiv.remove();selectDiv=null;break;}ul.css(\"display\",\"none\");})});$(document).contextmenu(function(e){e.preventDefault();ul.css({display: \"block\",left: e.clientX - 10,top: e.clientY - 10,});});
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 使用jQuery实现右键菜单