学着使用jquery

jquery确实很不错，封装了选取节点，更改属性和一些常用遍历的方法。

网上有很多基于jquery或者原生javascript的图片弹出层，有时候仅仅只是想弹出图片，不想加载太多js库，所以就有了一个想法来写一个基于jquery的图片弹出层，其实也是很简单、

这个是基于jquery的。

//这个是基于jquery插件形式的，使用方法$("#xxx").showphoto();中间是需要相应的元素
jQuery.fn.extend({
        showphoto:function () {
		//没用到外部样式
		//生成div遮罩层，并获取
        	div=$("<div class='divtop' style='background-color:gray;position: absolute;z-index:9999;filter:alpha(Opacity = 10);opacity: 0.1;'><div>").appendTo('body');
		//图片层
        	imgdiv=$("<div id='findimg' style='position: absolute;z-index:10000;'><img src='' style='border-radius:3px;border:3px solid gray;'></div>").appendTo('body');
		//这里是获取href属性对应图片src，也可以直接使用一个图片的src
        	imgdiv.find('img').attr('src',$(this).attr('href'));
		//设置图片div和遮罩层的宽度，图片div居中
        	divw=$(document).width();
        	divh=$(document).height();
        	imgdiv.css({top:divh/2,left:(divw-imgdiv.find('img').width())/2});
        	div.css({height:divh,width:divw,top:0,left:0});
		//定义一个关闭小图标，这里使用了图片，图标位置这里是上边角。并定义一个关闭事件，直接写onclick兼容ie6
        	close=$("<img id='closeimg' alt='close' src='img/close.png' style='position: absolute;z-index:10001;' onclick='$(this).closeimg()'/>").appendTo(imgdiv);
        	close.css({top:0,left:imgdiv.width()});
        },
        closeimg:function(){
        	div.remove();
        	imgdiv.remove();
        }
 });