首先创建jquery.gallery.js的插件文件,构建程序骨架。 复制代码 代码如下: { $.fn.gallery = function ()
{ return this.each { var self = $; self.click; } });
创建html文件,使用我们创建的插件。 复制代码 代码如下:

如何获得鼠标垫光标位置x和y

$(document).ready(function() {
$(document).mousemove(function(e){
$(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
});

 

12

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)]);
//可以指定多个地方拖拽
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
{
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[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;
};

/*$().extend(“bbb”,function(){ //调用方法
alert(“123”)
});*/

 

extend 插件入口 jquery eq 和get的封装
拖拽插件 //demo.js window.onload = function () { //个人中心
$().getClass(member).hover(function(){ $(this).css(background,…

图片 1
图片 2
图片 3
现在我们开始考虑如何实现点击图片的时候,显示放大图片的效果。其实我们显示放大的图片不是原先的图片,而是我们clone出了一个新图片,将他添加到页面中并加以显示。此外通过计算页面高度、宽度,图片高度、宽度,滚动条位置,来实现大图居中对齐的实现。下面我们看改进后的代码:
复制代码 代码如下: { $.fn.gallery =
function () { return this.each {
//将this变量保存到self,目的是为了避免程序错误
//至于原因,上章简单提到this在函数上下中中代表的对象不同 var self = $;
//统一将小图的高度设置成100(根据个人需要可以调整,或者提供options选项)
self.height; //添加click事件 self.click {
//移除id为myImgGallery的对象,其实这个对象就是大图对象
//每次点击的时候,都要移除上一次点击时产生的大图 $.remove
//jquery的clone方法,clone图片 .attr//设置id为myImgGallery .height /
2)//将图片高度设置为页面可用区域高度的一半 .css({ position: ‘absolute’
}) .prependTo//将大图添加到body对象中
//使用自己创建的center插件,实现图片居中
//注意,一定要将clone的对象添加到body后才能调用center方法,否则clone对象的width和height都为0
.center {//添加大图的click事件 $; //点击大图时,删除本身 }); }); }); };
$.fn.center = function () { return this.each.css({
//设置绝对定位,这样他就会浮动在最上层 position: ‘absolute’,
//设置垂直居中对齐 top: – $ / 2 + $ + ‘px’, //设置水平居中对齐 left: – $
/ 2 + $ + ‘px’ }); }); }; }); 好了,今天的内容到此结束。
demo下载地址:jQuery.plugin.gallery

//这段代码展示了在用户未输入值时,
//如何在文本类型的input域中保留
//一个默认值
wap_val = [];
$(“.swap”).each(function(i){
wap_val[i] = $(this).val();
$(this).focusin(function(){
if ($(this).val() == swap_val[i]) {
$(this).val(“”);
}
}).focusout(function(){
if ($.trim($(this).val()) == “”) {
$(this).val(swap_val[i]);
}});});

如何检查cookie是否启用

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = “cookietest=1; expires=” + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf(“cookietest=”) != -1;
if(!cookiesEnabled) {
//没有启用cookie
}

 

15

如何检查图像是否已经被完全加载进来

$(‘#theImage’).attr(‘src’, ‘image.jpg’).load(function() {
alert(‘This Image Has Been Loaded’);
});

14

1

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注