使用jQuery实现右键菜单

最新推荐文章于 2025-02-28 00:15:00 发布

爱俊俊的敏敏

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量521

点赞数

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44521686/article/details/107944324

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

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, 
     });
});