标签：
//base.js
var $=function(_this)//调用,把this传递过来
{
return new Base(_this);
};
//对象式
function Base(_this)
{
//创建一个数组来获取节点和节点的数组
this.elements=[];//私有化，不共用
if(_this!=undefined)//这里的_this是一个对象，undefined也是个对象，却别typeof放回的带单引号的 “undefined”
{
this.elements[0]=_this; //把this放到数组的第一个
}
}
//获取ID节点
Base.prototype.getId=function(id)
{
this.elements.push(document.getElementById(id));
return this;
};
//获取元素节点
Base.prototype.getTagName=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)
{
var all=document.getElementsByTagName("*");
for(var i=0;i<all.length;i++)
{
if(all[i].className==className)
{
this.elements.push(all[i]);
}
}
return this;
};
//获取某个节点
Base.prototype.eq=function(num)
{
var element=this.elements[num];
this.elements=[];//清空数组
this.elements[0]=element;//重新赋值
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] = value;
}
return this;
}
Base.prototype.click=function(fn)
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].onclick=fn;
}
return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{
for(var i=0;i<this.elements.length;i++)
{
if(arguments.length==0)
{
return this.elements[i].innerHTML;
}
else
{
this.elements[i].innerHTML=value;
}
}
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) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");
{
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) //调用方法， $().addRule(0,"body","background:red",0)
{
var sheet=document.styleSheets[num];
if(typeof sheet.insertRule!="undefined")//w3c
{
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}
else if(typeof sheet.addRule!="undefined")//iE
{
sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
}
};
//移除link或style的css规则,不常用
Base.prototype.addRule=function(num,index) //调用方法， $().removeRule(0);
{
var sheet=document.styleSheets[num];
if(typeof sheet.deleteRule!="undefined")//w3c
{
sheet.deleteRule(index);
}
else if(typeof sheet.removeRule!="undefined")//iE
{
sheet.removeRule(index);//sheet.addRule("body","background:red",)
}
};
//设置hover方法
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;
}
return this;
};
//添加show
Base.prototype.show=function()
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.display="block"
}
return this;
};
//添加hide
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 top=(getInner().height-width)/2;
var left=(getInner().width-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.resize = function (fn) {
for(var i=0;i<this.elements.length;i++)
{
var element=this.elements[i];
window.onresize=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;
};
//锁屏功能
Base.prototype.lock=function()
{
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].style.width=getInner().width+"px";
this.elements[i].style.height=getInner().height+"px";
this.elements[i].style.display="block";
document.documentElement.style.overflow = ‘hidden‘;
console.log( this.elements[i].style.width);
}
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‘;
}
return this;
};
//拖拽
Base.prototype.drag=function(){
for(var i=0;i<this.elements.length;i++)
{
this.elements[i].onmousedown=function(e)
{
preDef(e);
var e=getEvent(e);//阻止默认事件
var _this=this;
var diffX= e.clientX-_this.offsetLeft;
var diffY= e.clientY-_this.offsetTop;
if(_this.setCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
{
_this.setCapture();
}
document.onmousemove = function (e) {
var e = getEvent(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‘;
};
document.onmouseup=function()
{
if(_this.releaseCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
{
_this.releaseCapture();
}
this.onmousemove=null;
this.onmouseup=null;
}
}
}
return this;
};
//demo.js
window.onload = function () {
//个人中心
$().getClass("member").hover(function(){
$(this).css("background","url(images/arrow2.png) no-repeat 55px center");
$().getClass("member_ul").show();
},function(){
$().getClass("member_ul").hide();
$(this).css("background","url(images/arrow.png) no-repeat 55px center");
});
//登陆框
var login=$().getId("login");
var sreen=$().getId("screen");
login.center(350,250).resize(function(){
if (login.css(‘display‘) == ‘block‘) {
sreen.lock();
}
});
$().getClass("login").click(function(){
login.css("display","block");
});
$().getClass("close").click(function(){
login.css("display","none");
});
$().getClass("login").click(function(){
login.css("display","block");
sreen.lock();
});
$().getClass("close").click(function(){
login.css("display","none");
sreen.unlock();
});
//拖拽
login.drag();
};
//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>第34章 项目1-博客前端：下拉菜单</title>
<script type="text/javascript" src="tool.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body style="height:3000px;">
<div id="header">
<div class="logo"><img src="images/logo.gif" alt="" /></div>
<div class="member">个人中心
<ul class="member_ul">
<li><a href="###">设置</a></li>
<li><a href="###">换肤</a></li>
<li><a href="###">帮助</a></li>
<li><a href="###">退出</a></li>
</ul>
</div>
<div class="login">登录</div>
</div>
<div id="login">
<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
<div class="button"><input type="button" class="submit" value="" /></div>
<div class="other">注册新用户 | 忘记密码？</div>
</div>
<div id="screen"></div>
<p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>
</html>
标签：
原文地址：http://blog.csdn.net/xiaomogg/article/details/45462951
