jQ长按鼠标左键弹出菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ长按鼠标左键弹出菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery长按鼠标左键弹出快捷菜单代码</title>
<link href="css/zzsc.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.classm.js"></script>
<script type="text/javascript">
$(function(){
	$.classM({	
		/*
		自定义
		content 里面插入的内容，直接写HTML 例:content:"<div>要显示的内容</div>"
		width 背景的宽 例：width:200
		height 背景的高 例：height:200
		background 背景的路径	 例：background:"1.gif"
		time 鼠标按下的时长 例：200
		animateTime 显示与隐藏时的动画效果 例：200
		*/
	});
}) 
</script>
</head>
<body onselectstart="return false">
<!-- 代码 开始 -->
<div id="readme">长按鼠标左键，弹出快捷菜单效果</div>
<!-- 代码 结束 -->
</body>
</html>

JS代码(jquery.classm.js):

/** ClassM* Copyright (c) 2013 Classhttp://gaoge.name* E-Mail:g@gaoge.name* Date:2013-08*/
(function($){
	//ClassM$.classM = function(options){
	var defaults ={
	content:"<div class='classM'><a href='http://sc.chinaz.com/' target='_blank' class='M_1'></a><a href='http://sc.chinaz.com/' target='_blank' class='M_2'></a><a href='javascript:;
	' class='M_3'></a><a href='http://www.zheye.cc/' target='_blank' class='M_4'></a></div>",//Contentwidth:388,//this Tip Widthheight:93,//this Tip Heightbackground:"images/bg.png",//this Tip Backgroundtime:500,//show TimeanimateTime:200//animate}
var options = $.extend(defaults,options);
	$(document).each(function(){
	$("body").mousedown(function(e){
	setM = setTimeout(mouseD,options.time);
	winW = $(window).width();
	winH = $(document).height();
	winX = e.originalEvent.x || e.originalEvent.layerX || 0;
	winY = e.originalEvent.y || e.originalEvent.layerY || 0;
	if ( winW-winX < options.width ){
	winX = winX-options.width}
winScroll = $(document).scrollTop()winY = winY+winScroll;
}
)$("body").mouseup(function(){
	clearTimeout(setM)}
)$(document).scroll(function(){
	removeClassM()}
)}
)mouseD = function mouseD(){
	$("body").append("<div class='classMBg' style='position:absolute;
	top:0;
	left:0;
	background:#fff;
	width:100%;
	height:"+winH+"px;
	z-index:9999;
	'></div>");
	$(".classMBg").css("opacity","0").click(function(){
	removeClassM()}
);
	$(".classMBox").remove();
	$("body").append("<div class='classMBox' style='position:absolute;
	top:"+winY+"px;
	left:"+winX+"px;
	z-index:99999;
	display:none;
	width:0;
	text-align:center'>"+"<div style='width:"+options.width+"px;
	height:"+options.height+"px;
	background:url("+options.background+");
	'>"+options.content+"</div></div>");
	$(".classMBox a").focus(function(){
	$(this).blur()}
)$(".classMBox a").hover(function(){
	$(this).fadeTo("slow",0.5)}
,function(){
	$(this).fadeTo("slow",1)}
)$(".classMBox").show().animate({
	width:options.width+"px"}
,options.animateTime)$(document).keydown(function(event){
	if ( event.keyCode == 27 ){
	removeClassM()}
}
)}
function removeClassM(){
	$(".classMBox").animate({
	width:"0"}
,options.animateTime,function(){
	$(".classMBg,.classMBox").remove()}
)}
}
//}
)(jQuery);

CSS代码(zzsc.css):

body{margin:0;padding:0;color:#555;background:#f9f9f9}
.classM a{width:95px;height:93px;display:block;background:url(../images/ico.gif) no-repeat center 0;float:left;}
.classM a.M_2{background-position:0 -93px}
.classM a.M_3{background-position:0 -186px}
.classM a.M_4{background-position:0 -279px}
/**/
#readme{width:100%;height:400px;text-align:center;font:26px/200px "Microsoft YaHei","΢���ź�",Arial,\5b8b\4f53;float:left;}

附件:下载该文件资源,减少时间成本(增值服务)