具有渐入遮罩层效果的javascript弹出层伪类

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量540 收藏
点赞数
分类专栏： javascript 文章标签： javascript function hex methods div variables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoyaminaco/article/details/7162271
版权

20120301做了些修改：

function Dialog(){
	/**********************Attributes**********************/
	
	//Private//
	var isMasked 		= true,
		maskBeginAlpha 	= 0,
		maskEndAlpha 	= 60,
		maskColor 		= "#000",
		isCloseBtn 		= true,
		isTitle			= true;
		position 		= 0,
		canDrag 		= true,
		that 			= this;
	
	var isIE  = (document.all) ? true : false,
		isIE6 = !-[1,] && !window.XMLHttpRequest;
	
	/**********************Methods**********************/
	
	//Private//
	
	/**16进制Hex颜色值转换成RGB值**/
	function Hex2RGB(hex) {
		hex = hex.toUpperCase();
		if( hex.charAt(0) == "#" ) hex = hex.substring(1, hex.length);
		var rgb = new Array(3);
		rgb.r = hex.substring(0, 2);
		rgb.g = hex.substring(2, 4);
		rgb.b = hex.substring(4, 6);
		rgb.r = parseInt(rgb.r, 16);
		rgb.g = parseInt(rgb.g, 16);
		rgb.b = parseInt(rgb.b, 16);
		if(isNaN(rgb.r)) rgb.r = 0;
		if(isNaN(rgb.g)) rgb.g = 0;
		if(isNaN(rgb.b)) rgb.b = 0;
		return rgb;
	 }
	 
	 /**给定初始Alpha值，并从该值开始按照常量ALPHA_CHANGE_STEP为步进进行Alpha值的变化**/
	function changeAlpha(obj, beginAlpha, endAlpha){	
		if(isIE){					
			obj.style.filter = "Alpha(Opacity=" + beginAlpha + ")";
		}else{
			obj.style.opacity = (beginAlpha / 100);
		}
		
		var curAlpha = beginAlpha;
		
		if(beginAlpha < endAlpha){
			curAlpha += 10;
			if(beginAlpha < endAlpha){
				setTimeout(function(){changeAlpha(obj, curAlpha, endAlpha)}, 40);
			}
		}else{
			curAlpha -= 10;
			if(curAlpha <= 0){
				document.body.removeChild(obj);
			}else if(beginAlpha > endAlpha){
				setTimeout(function(){changeAlpha(obj, curAlpha, endAlpha)}, 40);
			}
		}
	}
	
	/**重置遮罩层**/
	function resizeMask(){
		with(maskLayer.style) {
			position = !isIE6 ? "fixed" : "absolute"; 
			backgroundColor = maskColor;
			filter = "Alpha(Opacity=" + maskBeginAlpha + ")";
			if(!isIE){
				opacity = ( maskEndAlpha / 100 );
				var rgb = Hex2RGB(maskColor);					
				var rgbFrom = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 0.3)";
				var rgbTo   = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 1)";
				background  = "-webkit-radial-gradient(center, " + rgbFrom + ", " + rgbTo + " 80%)";
				background  = "-moz-radial-gradient(center, " + rgbFrom + ", " + rgbTo + " 80%)";
				background  = "radial-gradient(center, " + rgbFrom + ", " + rgbTo + " 80%)";
			}
			left   = top = 0 + "px";
			width  = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
			height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
			zIndex = 1000;
		}
	}
	
	/**显示遮罩层**/
	function showMaskLayer(id){
		maskLayer = document.getElementById( "maskLayer_" + id );
		if (maskLayer){
			maskLayer.style.display = "block";
		}else{
			maskLayer = document.createElement("div");
			document.body.appendChild(maskLayer);
			maskLayer.id = "maskLayer_" + id;
		}
		resizeMask();
		changeAlpha(maskLayer, maskBeginAlpha, maskEndAlpha);
	}
	
	/**隐藏遮罩层**/
	function hideMaskLayer(id){
		maskLayer = document.getElementById("maskLayer_" + id);
		if(maskLayer){
			maskLayer.style.display = "none";
		}
	}
	
	/**为对话框添加标题层**/
	function addTitle(parent){
		var title = document.createElement("div");
		title.id = "title_" + parent.id;
		title.innerHTML = "Dialog title";
		with(title.style){
			height 	= 20 + "px";
			backgroundColor = "#999";
			cursor 	= "move";
			color 	= "#FFFFFF";
			fontSize 	= 12 + "px";
			paddingTop 	= 5 + "px";
			paddingLeft = 10 + "px";
		}
		parent.appendChild(title);
	}
	
	/**为弹出的对话框添加关闭按钮**/
	function addCloseBtn(parent){
		var closeBtn = document.createElement("span");
		
		closeBtn.innerHTML = "x";
		with(closeBtn.style){
			paddingRight = 5 + "px";
			right 	 = 0 + "px";
			top 	 = 0 + "px";
			display  = "block";
			float 	 = "right";
			cursor 	 = "pointer";
			position = "absolute";
			isTitle ? color = "#FFFFFF" : color = "#000000";
			fontFamily = "verdana";
			zIndex 	 = 1000;	//防止被信息层覆盖
		}
			
		//注意ie只支持attachEvent和oneventname来添加监听
		if(isIE){
			closeBtn.attachEvent('onmouseover', function(){
				closeBtn.style.color = "#FF0000";
			});
			closeBtn.attachEvent('onmouseout', function(){
				isTitle ? closeBtn.style.color = "#FFFFFF" : closeBtn.style.color = "#000000";
			});
			closeBtn.attachEvent('onclick', function(){
				that.hideDialog(parent.id);
			});
		}else{
			closeBtn.addEventListener('mouseover', function(){
				closeBtn.style.color = "#FF0000";
			});
			closeBtn.addEventListener('mouseout', function(){
				isTitle ? closeBtn.style.color = "#FFFFFF" : closeBtn.style.color = "#000000";
			});
			closeBtn.addEventListener('click', function(){
				that.hideDialog(parent.id);
			});
		}
		parent.appendChild(closeBtn);
	}
	
	/**为信息框附加信息层**/
	function addMsg(msg, parent){
		if(!document.getElementById("msg_" + parent.id)){
			var msgDiv = document.createElement("div");	
			msgDiv.id = "msg_" + parent.id;
			with(msgDiv.style){
				width      = parent.style.width;
				height     = parent.style.height;
				position   = "absolute";
				top        = 0 + "px";
				left       = 0 + "px";
				if(isTitle){
					height = parseInt(parent.style.height) - 20 + "px";
					top	   = 20 + "px";
				}
				lineHeight = height;
				textAlign  = "center";
				fontSize   = 14 + "px";
				color      = "#0B333C";
			}
			msgDiv.innerHTML = msg;
			parent.appendChild(msgDiv);
		}
	}
	
	/**根据对话框id执行拖动,焦点为标题栏**/
	function drag(id){
		if(!isTitle){
			return;
		}
		var posX;
		var posY;       
		fdiv = document.getElementById(id);     
		document.getElementById("title_" + id).onmousedown = function(e){
			if(!e){//IE
				 e = window.event; 
			}
			posX = e.clientX - parseInt(fdiv.style.left);
			posY = e.clientY - parseInt(fdiv.style.top);
			document.onmousemove = mousemove;           
		}
		document.onmouseup = function(){
			document.onmousemove = null;
		}
		function mousemove(ev){
			if(ev == null){//IE
				ev = window.event;
			}
			fdiv.style.left = (ev.clientX - posX) + "px";
			fdiv.style.top  = (ev.clientY - posY) + "px";
		}
	}
	
	//Privilege//
	
	this.setMask = function(a){
		isMasked = a;
	}
		
	this.setMask_color = function(a){
		maskColor = a;
	}
	
	this.setMask_alpha = function(a, b){
		maskBeginAlpha = a;
		maskEndAlpha = b;
	}

	this.setCloseBtn = function(a){
		isCloseBtn = a;
	}
	
	this.setCloseBtn_color = function(a, b){
		
	}
	
	this.setTile = function(a){
		isTitle = a;
	}
	
	this.setPosition = function(a, b){
		//
	}
	
	this.setDrag = function(a){
		canDrag = a;
	}
	
	/**弹出自定义对话框**/
	this.showDialog = function(id){
		var box = document.getElementById(id);
		if(isMasked){
			showMaskLayer(id);
			window.onresize = resizeMask;
		}
		with(box.style){
			display  = "block";
			zIndex 	 = 1001;
			position = !isIE6 ? "fixed" : "absolute";
			top = document.documentElement.clientHeight / 2 + "px";
			left = document.documentElement.clientWidth / 2 + "px";
			marginTop 	= - box.offsetHeight / 2 + "px";
			marginLeft 	= - box.offsetWidth  / 2 + "px";
		}
	}
	
	/**隐藏自定义对话框**/
	this.hideDialog = function(id){
		var box = document.getElementById(id);
		box.style.display = "none";	
		if(isMasked){
			hideMaskLayer(id);
		}
	}
	
	
	/**弹出有标题栏的警告框**/
	this.mAlert = function(msg){
		if (!document.getElementById("mAlert")){
			var mAlert = document.createElement("div");	
			mAlert.id = "mAlert";
			with(mAlert.style){
				width  = 460 + "px";
				height = 150 + "px";
				backgroundColor = "#FCFCFC";
				border = "1px solid #BBBEBF";
			}
			if(isTitle){
				addTitle(mAlert);
			}
			addMsg(msg, mAlert);
			if(isCloseBtn){
				addCloseBtn(mAlert);
			}
			document.body.appendChild(mAlert);
			if(canDrag){
				drag("mAlert");
			}
		}
		this.showDialog("mAlert");
	}
	
	/**右下信息框**/
	this.mBottomInfo = function(msg){
		if(!document.getElementById("mBottomInfo")){
			var mBottomInfo = document.createElement("div");	
			mBottomInfo.id 	= "mBottomInfo"; 
			with(mBottomInfo.style){
				width 	 = 300 + "px";
				height 	 = 200 + "px";
				position = !isIE6 ? "fixed" : "absolute";
				if(!isIE6){
					bottom = 0 + "px";
					right  = 0 + "px";
				}else{
					var dom = !(typeof document.compatMode != "undefined" && /CSS.Compat/.test(document.compatMode)) ? document.body : document.documentElement;
					left = dom.clientWidth  - 300 + "px";
                	top  = dom.clientHeight - 200 + "px";
				}
				backgroundColor = "#999";
			}
			if(isCloseBtn){
				addCloseBtn(mAlert);
			}
			addMsg(msg, mBottomInfo);
			document.body.appendChild(mBottomInfo);
			if(isIE6){
				var html = document.getElementsByTagName("html")[0],
					dd   = document.documentElement,
					db   = document.body,
					dom  = dd || db,
					getScroll = function(win){
						return {
							left: Math.max(dd.scrollLeft, db.scrollLeft),
							top : Math.max(dd.scrollTop, db.scrollTop)
						};
			 		};
				if (document.body.currentStyle.backgroundAttachment !== "fixed"){
					html.style.backgroundImage = "url(about:blank)";
					html.style.backgroundAttachment = "fixed";
				};
				var style = mBottomInfo.style,
					doc   = getScroll(),
					dom   = "(document.documentElement || document.body)",
					left  = parseInt(style.left) - doc.left,
					top   = parseInt(style.top) - doc.top;
				style.position = "absolute";
				style.removeExpression("left");
				style.removeExpression("top");
				style.setExpression("left", "eval(" + dom + ".scrollLeft + " + left + ") + 'px'");
				style.setExpression("top" , "eval(" + dom + ".scrollTop + " + top + ") + 'px'");
			}
			changeAlpha(mBottomInfo, 0, 100);
			setTimeout(function(){changeAlpha(mBottomInfo, 100, 0);}, 30000);
		}
	}
}

//public static methods//


——————————————————————————————————————————————————————

今天和同学商议着做了一个这样的模块。学习了js中伪类的使用方法以及作用域的问题。代码很简单，大家将就着看。

/** PopDialog.class
 ** Edited by yaoyaminaco 2011/12/29
 **/
function PopDialog(){
	// Constants:
	var DEFAULT_ALPHA_CHANGE_STEP = 10;						//默认的进行渐变显示层时Alpha值步进
	var DEFAULT_CHANGE_TIME_SLICE = 10;						//默认的事件alphaChange所激发的Alpha值变化的时间间色
	
	// Variables:
	
	// Private Variables:
	var that = this;
	var isIE = !!window.ActiveXObject?true:false;
	//var isIE6 = isIE&&!window.XMLHttpRequest?true:false;
	var isMasked = true;
	var maskFinalAlpha = 40;
	var maskBackgroundColor = '#000000';
	
	// Methods:
	
	// Private Methods:
	
	/** 
	 ** 16进制Hex颜色值转换成RGB值
	 ** hex[String]:16进制Hex颜色值
	 **/
	function Hex2RGB(hex) {
		hex = hex.toUpperCase();
		if(hex.charAt(0) == "#") hex = hex.substring(1,hex.length);
		var rgb = new Array(3);
		rgb.r = hex.substring(0,2);
		rgb.g = hex.substring(2,4);
		rgb.b = hex.substring(4,6);
		rgb.r = parseInt(rgb.r,16);
		rgb.g = parseInt(rgb.g,16);
		rgb.b = parseInt(rgb.b,16);
		if(isNaN(rgb.r)) rgb.r = 0;
		if(isNaN(rgb.g)) rgb.g = 0;
		if(isNaN(rgb.b)) rgb.b = 0;
		return rgb;
	 }
	 
	/** 
	 ** 给定初始Alpha值，并从该值开始按照常量ALPHA_CHANGE_STEP为步进进行Alpha值的变化
	 ** beginAlpha[int]:初始Alpha值，值域为0~100
	 ** finalAlpha[int]:结束Alpha值，值域为0~100
	 **/
	function alphaChange(beginAlpha){
		var curAlpha 	= beginAlpha;
		curAlpha += DEFAULT_ALPHA_CHANGE_STEP;
		
		if(isIE){					
			maskLayer.style.filter = "Alpha(Opacity=" + curAlpha + ")";
		}else{
			maskLayer.style.opacity = (curAlpha / 100);
		}
		
		if(curAlpha < maskFinalAlpha){
			setTimeout(function(){alphaChange(curAlpha)},DEFAULT_CHANGE_TIME_SLICE);
		}
	}
	
	/** 
	 ** 重置遮罩层css,必须是存在遮罩层的情况下才可以调用
	 **/
	function resizeMask(){
		with(maskLayer.style) {
			position = !isIE ? "fixed" : "absolute"; 
			background = that.maskBackgroundColor;
			
			var rgb = Hex2RGB(that.maskBackgroundColor);					
			var rgbFrom = 'rgba('+rgb.r+','+rgb.g+','+rgb.b+',0.3)';
			var rgbTo = 'rgba('+rgb.r+','+rgb.g+','+rgb.b+',1)';

			if(!isIE){
				background = '-webkit-radial-gradient(center,'+rgbFrom+','+rgbTo+' 80%)';
				background = '-moz-radial-gradient(center,'+rgbFrom+','+rgbTo+' 80%)';
				background = 'radial-gradient(center,'+rgbFrom+','+rgbTo+' 80%)';
			}
			left = '0px';
			top = '0px';
			width = document.body.clientWidth +'px';
			height = document.body.clientHeight+'px';				
			zIndex = 10000;
		}	
	}
	
	/** 
	 ** 显示遮罩层
	 **/
	function showMaskLayer(){
		maskLayer = document.getElementById("maskLayer");
		if (maskLayer){
			resizeMask();
			//如果遮盖层存在
			maskLayer.style.display="block";
			alphaChange(0);
		}else{
			//如果遮盖层不存在，建立一个新的遮盖层
			maskLayer=document.createElement("DIV");
			document.body.appendChild(maskLayer);
			maskLayer.id = 'maskLayer';
			resizeMask();
			//使得遮盖层不能被选中
			maskLayer.onselectstart=function(){return false;}; 
			maskLayer.οnselect=function(){document.selection.empty()}; 
			//遮盖层出现动画
			alphaChange(0);
		}
	}

	/** 
	 ** 隐藏遮罩层
	 **/
	function hideMaskLayer(){
		maskLayer = document.getElementById("maskLayer");
		if(maskLayer){
			maskLayer.style.display = "none";
		}
	}
	
	/** 
	 ** 为弹出的对话框添加关闭按钮
	 ** parentObj[Object]:需要添加关闭按钮的对象
	 **/
	function addCloseButton(parentObj){
		var closeButton=document.createElement('SPAN');
		
		closeButton.style.width = 20+'px';
		closeButton.style.height = 20+'px';
		closeButton.style.display = 'block';
		closeButton.style.float = 'right';
		closeButton.style.cursor = 'pointer';
		closeButton.style.backgroundImage = 'url("images/bg.png")';
		closeButton.style.backgroundPosition = '0 -64';
		closeButton.style.position = 'absolute';
		closeButton.style.right = 0;
		closeButton.style.top = 0;
			
		//注意ie只支持attachEvent和'oneventname'来添加监听
		if(isIE){
			closeButton.attachEvent('onmouseover',function(){
				closeButton.style.backgroundPosition='0 -96';
			});
			closeButton.attachEvent('onmouseout',function(){
				closeButton.style.backgroundPosition='0 -64';
			});
			closeButton.attachEvent('onclick',function(){
				closeButton.style.backgroundPosition='0 -128';
				that.hide(parentObj.id);
			});
		}else{
			closeButton.addEventListener('mouseover',function(){
				closeButton.style.backgroundPosition='0 -96';
			});
			closeButton.addEventListener('mouseout',function(){
				closeButton.style.backgroundPosition='0 -64';
			});
			closeButton.addEventListener('click',function(){
				closeButton.style.backgroundPosition='0 -128';
				that.hide(parentObj.id);
			});
		}
		parentObj.appendChild(closeButton);
	}
	
	// Privilege Methods:
	
	/**
	 ** 配置遮罩层参数
	 ** maskColor[Hex]:十六进制的Hex颜色
	 ** maskAlpha[int]:遮罩层的透明度，值域0~100
	 **/
	this.configMaskLayer = function(maskColor,maskAlpha){
		this.maskBackgroundColor = maskColor;
		this.maskFinalAlpha = maskAlpha;
	}
	
	/** 
	 ** 根据高亮层div的ID属性，显示对应高亮层
	 ** dialogID[String]:高亮层ID							//必选
	 **/
	this.show = function(dialogID){
		var box = document.getElementById(dialogID);
		
		if(this.isMasked){
			showMaskLayer();							//显示遮罩层
		}
		
		onresizeFunction = window.onresize;
		window.onresize = resizeMask;
		box.style.display = "block";
		box.style.zIndex = 10001;
		box.style.left = "50%";
		box.style.top = "50%";
		box.style.marginTop = - box.offsetHeight / 2 + "px";
		box.style.marginLeft = - box.offsetWidth / 2 + "px";
		box.style.position = !isIE ? "fixed" : "absolute"; 
		
	}
	
	/**
	 ** 根据高亮层div的ID属性，隐藏对应高亮层
	 ** dialogID[String]:高亮层ID
	 **/
	this.hide = function(dialogID){
		var box = document.getElementById(dialogID);
		box.style.display = "none";	
		if(this.isMasked){
			hideMaskLayer();
		}
		window.onresize	= onresizeFunction;
	}
	
	
	/**
	 ** 警告框
	 **/
	this.popAlert = function(content){
		if (!document.getElementById('popAlert')){
			var popAlert = document.createElement('DIV');	
			popAlert.id = 'popAlert';
			popAlert.style.width = 460 + 'px';
			popAlert.style.height = 150 + 'px';
			popAlert.style.lineHeight = 100 + 'px';
			popAlert.style.textAlign = 'center';
			popAlert.style.fontSize = 14 + 'px';
			popAlert.style.color = '#0B333C';
			popAlert.style.backgroundColor = '#FCFCFC';
			popAlert.style.border = '1px solid #BBBEBF';
			popAlert.innerHTML = content;
			addCloseButton(popAlert);
			document.body.appendChild(popAlert);
		}
		this.show('popAlert');
	}
}

// Public static Methods:


该伪类的调用很简单：

<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="javascript" src="PopDialog.class.js"></script>
    </head>
    <body>
    	<div id="test" style="width:100px;height:100px;display:none;background:red"></div>
    </body>
    <script language="javascript">
		var p=new PopDialog();
		p.isMasked=true;
		p.configMaskLayer('#00ff00',60);
		p.popAlert('ni');
	</script>
</html>

Yaoyaminaco
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3遮罩弹出模态框代码
07-24
当用户触发某个事件（如点击按钮）时，可以通过JavaScript或CSS3的伪类来改变模态框和遮罩层的可见性和透明度，实现点击弹出的效果。例如，添加`.is-visible`类到这两个元素上： ```javascript document....
背景变暗弹出层 遮蔽层效果
07-30
CSS可以利用伪类（如`:hover`）和定位（如`position: fixed`）来实现弹出层的显示和隐藏，同时通过调整背景颜色的透明度（如`opacity`）来实现背景变暗。 在实际应用中，开发者可以根据项目需求选择合适的实现方式...
JavaScript点击弹出遮罩层
weixin_44561520的博客
01-20 1575
JavaScript点击弹出遮罩层 开发工具与关键技术：DW与JS 作者：戴怡斌 18级 撰写时间：2019年1月18日 下面我们使用JavaScript控制遮罩层部分，接下来来看一个例子，当我点击图1里的绿色小球弹出一个提示框，见图1 看到截图里的这个提示框说明我们可以继续往下敲，点击确定之后弹出遮罩层，我们看截图js代码部分 在这里面还用到css3部分，通过trans...
elementUI中dialog出现冲突，遮罩层直接全黑解决方法
前端代码小白的日常博客
09-07 3336
在使用饿了么组件中的dialog时，由于多个路由组件之间的嵌套出现了一种情况。点击弹出dialog的时候会出现这种情况，如上图。搜了有博主的解决方法，内容，特此记录一下。
纯CSS实现鼠标悬停出现遮罩层
zg0601的博客
11-17 4146
CSS实现鼠标悬停出现遮罩层——遮罩层只有背景颜色和既有背景颜色又有背景图片的情况
css实现遮罩层，父div透明，子div不透明
qq_36935391的博客
12-23 8350
博客园 首页 新随笔 联系 管理 订阅 随笔- 1021  文章- 1  评论- 24  css实现遮罩层，父div透明，子div不透明 使用元素的opacity 属性，设置遮罩层的效果， 主要 样式是：background-color: #ooo; opacity:0.3; 1 2 3 4 &lt;div style="wid...
Js弹出层（支持拖拽，多个弹窗自动切换层级）
往回的博客
01-09 881
Js弹出层 使用方法： 1，首先导入css和js &lt;script type="text/javascript" src="js/PopUpManager-compressed.js" &gt;&lt;/script&gt; &lt;link href="css/PopUpLayer.css" type="text/css" rel="stylesheet"
CSS 弹框背景变模糊或者加遮罩
weixin_51747462的博客
12-28 1663
CSS 使弹框背景页面变模糊 给弹框加遮罩
CSS遮罩效果和毛玻璃效果
weixin_34077371的博客
09-12 173
前面的话 　　本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 　　一般地，处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ ...
javascript笔记
Nie_XiaoGang的博客
12-11 1853
javascript笔记
前端javaScript学习路线及知识点等
积极的小可爱~的博客
01-19 430
** 在此做记录，只是单纯想能随时查看，如有侵权什么的，请联系我，我会删除 ** 转载出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-interview [KaTeX parse error: Expected 'EOF', got '#' at position 22: …HTTP，web 综合问题](#̲html，-http，web综合问题) 常见排序算法的时间复
jQuery图片动画遮罩层lightbox特效.zip
07-11
这可以通过CSS选择器和伪类来实现，例如`.img-hover:hover`，并结合`transition`属性设置遮罩层的透明度变化。 Lightbox特效是网页中常用的一种图片预览方式，当用户点击图片时，图片会在一个半透明的弹出窗口中...
jquery弹出层登录和全屏注册.zip
11-20
例如，CSS可以设置弹出层的定位（position属性），透明度（opacity和transition属性）以及全屏注册时的背景遮罩效果。 5. **CSS选择器和伪类**：CSS3引入了更多的选择器，如`:hover`, `:active`, `:focus`等伪类，...
css3实现的点击按钮弹出无刷新交互遮罩层特效源码.zip
10-31
使用JavaScript（如jQuery）监听按钮的点击事件，当点击按钮时，添加`show`类到遮罩层，从而触发CSS3的过渡效果。同时，添加关闭按钮或点击遮罩层任意位置关闭的效果。 ```javascript $('#openModal').on('click...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 649
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 74
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 415
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1295
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
JavaScript深度解析：延迟对象、跨域、模板引擎、弹出层与AJAX实例
本文详细介绍了JavaScript中的几个关键概念和技术：延迟对象、跨域处理、模板引擎、弹出层以及AJAX。以下是对这些主题的深入解析： 1. **AJAX示例** AJAX是一种用于创建动态网页交互的技术，它允许在不刷新整个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值