标签：
//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([$().getTagName("span").eq(0),$().getTagName("h2").eq(0)]); //可以指定多个地方拖拽
login.drag([$().getTagName("h2").get(0)]);//如果有多个h2的话将至运行第一个
alert($().getTagName("h2").get(0)) //htmlelement
alert($().getTagName("h2").eq(0)) //object
};
**********************************************0我是分割线0.********************************************************************************
//接下来这个文件时亮点，把拖拽封装成插件
//base_drag.js
/**
* Created by Administrator on 2015/5/7.
*/
$().extend("drag",function(tags){
for(var i=0;i<this.elements.length;i++)
{ addEvent( this.elements[i],"mousedown",function(e) {
var _this=this;
var diffX= e.clientX-_this.offsetLeft;
var diffY= e.clientY-_this.offsetTop;
//自定义拖拽区域
var flag = false;
for (var i = 0; i < tags.length; i ++) {
if (e.target == tags[i]) {
flag = true;
//只要有一个是true，就立刻返回
break;
}
}
if(flag)
{
addEvent(document,"mousemove",move);
addEvent(document,"mouseup",up);
}
else
{
removeEvent(document,"mousemove",move);
removeEvent(document,"mouseup",up);
}
function move(e){
var e = getEvent(e);
// e.preventDefault();//阻止默认事件
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(_this.setCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
{
_this.setCapture();
}
}
function up()
{
if(_this.releaseCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
{
_this.releaseCapture();
}
removeEvent(document,"mousemove",move);
removeEvent(document,"mouseup",up);
}
});
}
return this;
});
//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对象
Base.prototype.eq=function(num)
{
var element=this.elements[num];
this.elements=[];//清空数组
this.elements[0]=element;//重新赋值
return this; //返回如jq的eq（）一样的东西
};
//获取某个节点,并且放回这个节点的对象
Base.prototype.get=function(num)//
{
return this.elements[num];//返回如jq的get（）一样的东西
};
//设置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;
addEvent(this.elements[i],"mouseover",over);
addEvent(this.elements[i],"mouseout",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‘;
}
}*/
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;
};
//锁屏功能
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‘;
addEvent(window,"scroll",scrollTop);
}
return this;
};
function scrollTop(){
document.documentElement.scrollTop=0;// IE W3C
document.body.scrollTop=0;//火狐
}
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.extend=function(name,fn)
{
Base.prototype[name]=fn;
};
/*$().extend("bbb",function(){ //调用方法
alert("123")
});*/
103 extend 插件入口 jquery eq 和get的封装 拖拽插件
标签：
原文地址：http://blog.csdn.net/xiaomogg/article/details/45568149
