javascript之博客前端的自定义可以拖拽的弹出登陆框

本文介绍了一个自定义的JavaScript库,该库用于简化网页元素操作,包括获取元素、设置样式、添加事件监听器等功能。并通过实例展示了如何使用这个库来实现一个可拖动、居中的登录窗口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在学习李炎恢老师的javascript,边学边记录学习过程中的代码笔记。

下面是实现弹出登陆窗口的效果图:



接下来贴出代码笔记:

base.js自定义封装库:

/**
博客前端+封装库
*/
/********************自定义封装***************************/
function $(_this){
 return new Base(_this);//每次创建一个Base对象,防止页面共用同一个Base对象
}
//基础库
function Base(_this){
	this.elements=[];//创建一个临时数组。存放元素节点对象
	if(_this!=undefined){//undefined这里是一个对象,区别与tyoeof带单引号有区别
		this.elements[0]=_this;	
	}
}
//通过id获取节点
Base.prototype.getById=function(id){
		this.elements.push(document.getElementById(id));
		return this;
	};

//通过元素名称获取节点
Base.prototype.getByTagName=function(tag){
        var	tags=document.getElementsByTagName(tag);
		for(var i=0;i<tags.length;i++){
			this.elements.push(tags[i]);
		}
		return this;
	};


//获取class节点数组
Base.prototype.getClass=function(className,idName){
		var node=null;
		if(arguments.length==2){//指定区域div中的所有class集合
			node=document.getElementById(idName);
		}else{
			node=document;
		}
		var all=node.getElementsByTagName('*');
		for(var i=0;i<all.length;i++){
			if(all[i].className==className){
				this.elements.push(all[i]);
			}
		}
		return this;
	}

//获取class节点集合中的某一个节点
Base.prototype.getElement=function(num){
		var element=this.elements[num];
		this.elements=[];//清空原来的节点集合
		this.elements[0]=element;
		return this;
	}

//添加class
Base.prototype.addClass=function(className){
	for(var i=0;i<this.elements.length;i++){
		if(!hasClass(this.elements[i], className)){//避免重复相同的class
			this.elements[i].className+=" "+className;
		}
	}
	return this;
}

//移除class
Base.prototype.removeClass=function(className){
	for(var i=0;i<this.elements.length;i++){
		if(!hasClass(this.elements[i], className)){//避免重复相同的class
			this.elements[i].className= this.elements[i].className.replace(new RegExp("\\s|^"+className+'(\\s|$)'));
		}
	}
	return this;
}

//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
	var sheet = document.styleSheets[num];
	insertRule(sheet, selectorText, cssText, position);
	return this;
}

//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
	var sheet = document.styleSheets[num];
	deleteRule(sheet, index);
	return this;
}

//设置css样式
Base.prototype.css=function(attr,value){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==1){
			return getStyle(this.elements[i], attr);
			//return this.elements[i].style[attr];//获取css属性内容
		}
		this.elements[i].style[attr]=value;
	}
	return this;
}
//设置节点内容
Base.prototype.html=function(text){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==0){
			return this.elements[i].innerHTML;//获取节点内容
		}
		this.elements[i].innerHTML=text;
	}
	return this;
}

//设置hover的onmouseover和onmouseout事件
Base.prototype.hover=function(over,out){
	for(var i=0;i<this.elements.length;i++){
		//this.elements[i].onmouseover=over;
		//this.elements[i].onmouseout=out;
		addEvent(this.elements[i], 'mouseover', over);
		addEvent(this.elements[i], 'mouseout', out);
	}
	return this;
};

//显示ul
Base.prototype.show=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="block";
	}
	return this;
};

//隐藏ul
Base.prototype.hide=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="none";
	}
	return this;
};

//居中显示登陆框事件
Base.prototype.center=function(width,height){
	var left=(document.documentElement.clientWidth-width)/2;
	var top=(document.documentElement.clientHeight-height)/2;
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.top=top+"px";
		this.elements[i].style.left=left+"px";
	}
	return this;
}

//增加锁频功能
Base.prototype.lock=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.height=getInner().height+"px";
		this.elements[i].style.width=getInner().width+"px";
		this.elements[i].style.display="block";
		document.documentElement.style.overflow = 'hidden';//隐藏滚动条

		/*
		addEvent(this.elements[i], 'mousedown', function (e) {
			e.preventDefault();
			addEvent(document, 'mousemove', function (e) {
				e.preventDefault();
			});
		});
		*/
		addEvent(window, 'scroll', scrollTop);
	}
	return this;
}
//增加取消锁屏功能
Base.prototype.unlock=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="none";
		document.documentElement.style.overflow = 'auto';//显示滚动条
		removeEvent(window, 'scroll', scrollTop);
	}
	return this;
}

//设置点击事件
Base.prototype.click=function(fn){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].onclick=fn;
	}
	return this;
}

//设置浏览器窗口大小改变事件
Base.prototype.resize=function(fn){
	for (var i = 0; i < this.elements.length; i ++) {
		var element=this.elements[i];
		/*window.onresize=function(){    //传统的事件
		};*/
		addEvent(window,'resize',function(){
			fn();
			if(element.offsetLeft >getInner().width-element.offsetWidth){
				element.style.left=getInner().width-element.offsetWidth+"px";
			}

			if(element.offsetTop > getInner().height-element.offsetHeight){
				element.style.top=getInner().height-element.offsetHeight+"px";
			}
		});
	}
	
	return this;
	
}

//自定义拖拽div功能
Base.prototype.drag=function(){
	for (var i = 0; i < this.elements.length; i ++) {
		addEvent(this.elements[i], 'mousedown', function (e) {
			if (trim(this.innerHTML).length == 0) e.preventDefault();
			var _this = this;//记住oDiv
			//preDefault(e);//阻止浏览器的默认行为
			//var e=getEvent(e);
			var diffX = e.clientX - _this.offsetLeft;
			var diffY = e.clientY - _this.offsetTop;
			
			if (e.target.tagName == 'H2') {
				addEvent(document, 'mousemove', move);
				addEvent(document, 'mouseup', up);
			} else {
				removeEvent(document, 'mousemove', move);
				removeEvent(document, 'mouseup', up);
			}
			
			function move(e) {
				var left = e.clientX - diffX;
				var top = e.clientY - diffY;
				
				if (left < 0) {//判断往左边拖拽的时候不能超过当前的窗口
					left = 0;
				} else if (left > getInner().width - _this.offsetWidth) {//判断往右边拖拽的时候不能超过当前的窗口
					left = getInner().width - _this.offsetWidth;
				}
				
				if (top < 0) {//判断往上边拖拽的时候不能超过当前的窗口
					top = 0;
				} else if (top > getInner().height - _this.offsetHeight) {//判断往下边拖拽的时候不能超过当前的窗口
					top = getInner().height - _this.offsetHeight;
				}
				
				_this.style.left = left + 'px';
				_this.style.top = top + 'px';
				
				if (typeof _this.setCapture != 'undefined') {//防止IE浏览器在拖拽div到浏览器外时 ,当前事件不会作用到div上
					_this.setCapture();
				} 
			}
			
			function up() {
				removeEvent(document, 'mousemove', move);
				removeEvent(document, 'mouseup', up);
				if (typeof _this.releaseCapture != 'undefined') {//防止IE浏览器在拖拽div到浏览器外时 ,当前事件不会作用到div上
					_this.releaseCapture();
				}
			}
		});
			//document.onmousemove=function(e){ }
			/*this.elements[i].onmousedown=function(e){}
			document.onmouseup=function(){
				this.onmousemove=null;
				this.onmouseup=null;
				if (typeof _this.releaseCapture != 'undefined') {
					_this.releaseCapture();
				}
			}*/
	}
	return this;
}





/****************************下面的可以封装到一个js文件中********************************************/

/*		
		//实现累加,并且清晰的指出是专给addEvent用的
		//JS一切皆为对象,所以addEvent.ID语法正确,实际上是个全局变量
		alert(addEvent.ID);
		addEvent.ID++;
		
		
*/
//添加事件(obj:事件对象,type:事件类型(如:click,load等),fn:事件处理函数)
function addEvent(obj,type,fn){
	if(typeof obj.addEventListener!="undefined"){//w3c
		 obj.addEventListener(type,fn,false);//false表示不捕获
	}else{//IE
		//创建一个存放事件的哈希表(散列表)
		if (!obj.events) obj.events = {};
		//第一次执行时执行
		if (!obj.events[type]) {	
			//创建一个存放事件处理函数的数组
			obj.events[type] = [];
			//把第一次的事件处理函数先储存到第一个位置上
			if (obj['on' + type]) obj.events[type][0] = fn;
		} else {
			//同一个注册函数进行屏蔽,不添加到计数器中
			if (addEvent.equal(obj.events[type], fn)) return false;
		}
		//从第二次开始我们用事件计数器来存储
		obj.events[type][addEvent.ID++] = fn;
		//执行事件处理函数
		obj['on' + type] = addEvent.exec;
	}
}

//为每个事件分配一个计数器
addEvent.ID = 1;


//执行事件处理函数
addEvent.exec = function (event) {
	var e = event || addEvent.fixEvent(window.event);
	var es = this.events[e.type];
	for (var i in es) {
		es[i].call(this, e);
	}
};

//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
	for (var i in es) {
		if (es[i] == fn) return true;
	}
	return false;
}

//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
	event.preventDefault = addEvent.fixEvent.preventDefault;
	event.stopPropagation = addEvent.fixEvent.stopPropagation;
	return event;
};

//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
	this.returnValue = false;
};

//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
	this.cancelBubble = true;
};


//跨浏览器删除事件
function removeEvent(obj, type, fn) {
	if (typeof obj.removeEventListener != 'undefined') {
		obj.removeEventListener(type, fn, false);
	} else {
		for (var i in obj.events[type]) {
			if (obj.events[type][i] == fn) {
				delete obj.events[type][i];
			}
		}
	}
}



//跨浏览器获取窗口的大小
function getInner(){
	if(typeof window.innerWidth!="undefined"){
		return {
			width:window.innerWidth,
			height:window.innerHeight
		};
	}else{
		return {
			width:document.documentElement.clientWidth,
			height:document.documentElement.clientHeight
		};
	}
}



//跨浏览器获取Style
function getStyle(element, attr) {
	//获取外部样式表的设置
		if(typeof window.getComputedStyle!='undefined'){//W3C
			return window.getComputedStyle(element,null)[attr];
		}else if(typeof element.currentStyle !='undefined'){//IE
			return element.currentStyle[attr];
		}
}


//判断class是否存在
function hasClass(element, className) {
	return element.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'));
}


//跨浏览器添加link规则
function insertRule(sheet, selectorText, cssText, position) {
	if (typeof sheet.insertRule != 'undefined') {//W3C
		sheet.insertRule(selectorText + '{' + cssText + '}', position);
	} else if (typeof sheet.addRule != 'undefined') {//IE
		sheet.addRule(selectorText, cssText, position);
	}
}

//跨浏览器移出link规则
function deleteRule(sheet, index) {
	if (typeof sheet.deleteRule != 'undefined') {//W3C
		sheet.deleteRule(index);
	} else if (typeof sheet.removeRule != 'undefined') {//IE
		sheet.removeRule(index);
	}
}

//获取Event对象
function getEvent(event) {
	return event || window.event;
}

//由于在较低版本的火狐浏览其中存在点击事件的兼容性问题,阻止浏览器的默认行为
function preDefault(event){
	if(event.preventDefault!="undefined"){//w3c
		event.preventDefault();
	}else{
		event.returnValue=false;
	}
}

//删除左后空格
function trim(str) {
	return str.replace(/(^\s*)|(\s*$)/g, '');
}

//滚动条清零
function scrollTop() {
	document.documentElement.scrollTop = 0;
	document.body.scrollTop = 0;
}



style.css样式表:

#box{
	color:#FFFF00;
	font-size:25px;
}
body ul  {
    margin:0;padding:0;
	font-size:15px;

}
#head{
	width:100%;
	height:30px;
	background:url(images/CP_page.png) repeat-x;
}
#head .logo{
	width:100px;
	height:30px;
	float:left;
}
#head .logo img{
	display:block;
}
#head .member{
	width:100px;
	height:30px;
	/*background:#FFDE96;*/
	float:right;
	text-align:center;
	line-height:30px;
	cursor:pointer;
	/*position:relative;*/
}

#head .member ul{
	position:absolute;
	width:100px;
	background:#FDFDFD;
	list-style:none;
	float:right;
	top:35px;
	border:1px solid #999;
	display:none;
	
}
#head .member:hover{
	background:#808000;
}
#head .member ul li{
	height:25px;
	line-height:25px;
	/*display:inline; letter-spacing:1px;字体间距*/
}
}
#head .member ul a{
	text-decoration:none;
	color:#333;
	display:block;
	background:url(images/arrow_down.jpg) no-repeat 3px center;
}
#head .member ul a:hover{
	background:#fc0;
	display:block;
}

#head .login{
	float:right;
	margin-right:5px;
	width:50px;
	top:5px;
	height:30px;
	/*background:#FFDE96;*/
	text-align:center;
	cursor:pointer;
	line-height:30px;
}
#screen{
	position:absolute;
	top:0;
	left:0;
	width:550px;
	height:550px;
	z-index:9998;
	background:#000;
	filter:alpha(opacity=30);/*对ie有效*/
	opacity:0.3;/*对谷歌,火狐有效*/
	display:none;
}
#login{
	width:350px;
	height:250px;
	border:1px solid #999;
	position:absolute;/*/设置之后才可以设置top,left'*/
	background:#fff;
	z-index:9999;
	display:none;
	
}
#login h2{
	margin:0px;
	padding:0px;
	text-align:center;
	background: url(images/CP_page.png) repeat-x;
	cursor:move;
}
#login h2 img{
	float:right;
	margin-top:8px;
	margin-right:8px;
	cursor:pointer;
	position:relative;
}
#login div.user,#login div .pass{
	font-size:15px;
	color:#666;
	text-align:center;
	padding:20px 0;
}
#login input.text{
	width:230px;
	height:25px;
	font-zise:15px;
	border:1px solid #ccc;
	background:#fff
}
#login input.submit{
	width:105px;
	height:45px;
	background:url(images/button_user.png) no-repeat;
	border:none;
	color:#fff;
	font-size:20px;
	cursor:pointer;
}
#login .login_foot{
	font:size:16px;
	float:right;
	margin-top:15px;
	margin-right:15px;
	color:#999;
}

demo3.js执行效果的javascript代码:

/***************连缀:链式编程*************************/
/*
	Base.getById('box').css('colr','red').html('').click(function(){
		alert('');
	}));
	Base.getById('box');//返回的divEelement
	Base.getById('box').css('colr','red');//返回的是Base对象
*/

window.onload=function(){
	//alert($().getById('box'));
	//$().getById('box').css('color','red').css('backgroundColor','black');
	//$().getByTagName('p').css('color','green').html('标题').click(function(){
		//alert('测试');
	//});
	//$().getById('box').css('font-size','20px');
	//获取外部样式表的属性值
	//alert($().getById('box').css('font-size'));

	//$().getClass('pclass').css('color','red');

	//$().getClass('pclass').getElement(2).css('color','red');
	//$().getClass('pclass','aaa').css('color','red');
	$().getClass("member").hover(function(){
		 $().getByTagName("ul").show();
	},function(){
		  $().getByTagName("ul").hide();
	});
	alert(document.documentElement.clientWidth+","+document.documentElement.clientHeight);


	/***************下面是设置登陆框*******/

	//把下面的代码封装到自定义库中
	/*
	
	var left=(document.documentElement.clientWidth-350)/2;
	var top=(document.documentElement.clientHeight-250)/2;
	 $().getById("login").css("top",top+"px").css("left",left+"px");
	window.onresize=function(){
		var left=(document.documentElement.clientWidth-350)/2;
		var top=(document.documentElement.clientHeight-250)/2;
		$().getById("login").css("top",top+"px").css("left",left+"px");
	}*/

	var login=$().getById("login");
	var screen=$().getById("screen");
	//;
	login.center(350,250).resize(function(){
		//login.center(350,250)
		//随着浏览器改变重置居中
		if(login.css("display")=="block"){//执行动态锁频
			screen.lock();
		}
	});

	//设置点击按钮时显示登陆框
	$().getClass("login").click(function(){
		login.center(350, 250);
		login.css("display","block");
		screen.lock();
	});
	//点击取消按钮隐藏登陆框
	$().getClass("close").click(function(){
		login.css("display","none");
		screen.unlock();
	});

	//拖拽流程:
	//1.先点下去
	//2.在点下的物体被选中,进行move移动
	//3.抬起鼠标,停止移动
	//点击某个物体,用oDiv即可,move和up是全局区域,也就是整个文档通用,应该用document
	login.drag();

};

到这里就可实现上面的登陆窗口效果

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值