学着使用jquery

来源：互联网发布：微信表情制作软件编辑：程序博客网时间：2024/05/13 00:49

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();        } });