103 extend 插件入口 jquery eq 和get的封装 拖拽插件

这是度岁的时候自身写的js滚动条插件的源码,做出的职能要好并不称心,正因为做的并不顺心所以回头重新加强和浓烈学习js,那个插件犹如下多少个不太好听的地点:

103 extend 插件入口 jquery eq 和get的封装 拖拽插件

//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)]State of Qatar; //能够内定多少个位置拖拽
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
{ 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
{
this.elements.push(tags[i]);
}
return this;
};
//class获取
Base.prototype.getClass=function(className)
{
var all=document.getElementsByTagName("*");
for(var i=0;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[i].onclick=fn;
}
return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{

for(var i=0;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
{
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
103 extend 插件入口 jquery eq 和get的封装 拖拽插件。{
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,positionState of Qatar//调用艺术, $(卡塔尔国.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[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[i].style.display="block"

}
return this;
};
//添加hide
Base.prototype.hide=function()
{
for(var i=0;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[i].style.top=top+"px";
this.elements[i].style.left=left+"px";
}
return this;
};
//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
for(var i=0;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[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[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;
};

/*$(State of Qatar.extend("bbb",function(State of Qatar{ //调用艺术
alert("123")
});*/

 

extend 插件入口 jquery eq 和get的封装 拖拽插件 //demo.js window.onload = function (卡塔尔国 { //个人基本 $(卡塔尔国.getClass(member卡塔尔(قطر‎.hover(function(){ $(this卡塔尔国.css(background,...

剧情的过分效果,能够参照QQ顾客端近年来会话列表里的滚动条,它的轮转特其他坦荡,说来讲去正是贫乏动漫过渡效果。

并不算圆满的宽容性,在IE6、7下的style仍有一点可惜。

体制的不到家,举例鼠标悬浮才展现滚动条,移除后规避这种功用都不曾写。

内部构造的头晕目眩,须求调动内容布局。

滚动条那些图片毕竟不是油画,本身切图切的正是恶心到爆了...囧

完整来说仍为能够看的,照旧远远不足三个动漫。在写那么些插件意识到本身的插件用到了生机勃勃部分相比根基的函数,于是想到把那么些函数应该封装起来,近些日子照例在深深学习js,把手头上那本书看完就应当伊始写那些基本功函数的插件了,当然,动画引擎必不可少。话相当少说,源码在那(注意:本插件完整版的是有图表的,请在文末附属类小构件中下载完整的插件):

返回列表