[原创]居中显示大图带遮罩层的简单jQuery插件imgBox

最近做的一个项目中要查看大图，于是想自己封装一个jQuery插件,不兼容firefox和chrom浏览器，希望博友能帮忙修改完善

点击下载：/Files/Jaylong/imgbox.zip

先看效果：

jQuery代码：

 

View Code

( function ($) {
    $.fn.imgBox =  function (opts){
         var width = $(window).width();
         var height = $(window).height();
         var defaults={idName:"#lightbox"};
         var obj= $.extend({}, defaults, opts);
         var id = $(obj.idName)
        id.hide();  
        $(".imgbox").click( function (e) {
             var img =  new Image();
            img.src = $( this).attr("href");
            $("*").stop();  // 停止所有正在运行的动画
           id.hide();
             //                 var html = "<div id=\"lightbox\"><img  src=\"" + img.src + "\" /><div id=\"close\"></div></img><div>" + $(this).attr("title") + "</div></div>"
             //                 $("body").append(html);
            $("img", id).attr("src", img.src);
            $("div:eq(1)", id).html($( this).attr("title"));
             // 追加一个层，使背景变灰
            $("body").append("<div id='greybackground'></div>");
            $("#greybackground").css({
                opacity: "0.5",
                height: "100%",
                width: "100%",
                top: 0,
                left: 0,
                position: "absolute",
                backgroundColor: "#9c9c9c"
            });
             // 设置样式 
             id.css({
                position: "absolute",
                border: "5px solid #ccc",
                "text-align": "center",
                width: img.width
            })
            $("#close", id).css({
                position: "absolute",
                top: -13 + "px",
                left: img.width - 10 + "px",
                width: "26px",
                height: "26px",
                background: "url(Images/fancybox.png) -42px 0",
                cursor: "pointer"
            })
            $("div:eq(1)", id).css({
                "font-size": "12px", "font-family": "Arial", margin: "5px"
            })
            id.css({ "top": (height - img.height) / 2 + "px", "left": (width - img.width) / 2 - 17 + "px", "z-index": 1000 }).fadeIn("slow");
        })
        $("#close", id).click( function () {
           id.hide();
            $("#greybackground").remove();
        })
    } 
}) (jQuery)

前台调用代码：

 

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
     < title ></ title >
     < style  type ="text/css" >
      .imgUl li {  float : left ;  margin-left : 20px ;  list-style : none ;  margin-top : 20px ;  border : 5px solid #ccc ; }
     </ style >
     < script  src ="Js/jquery-1.3.2.min.js"  type ="text/javascript" ></ script >
     < script  src ="Js/imgbox.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
        $( function  () {
             //调用    $( " .imgbox " ).imgBox({ idName:  " #lightbox "  })    

       })
</ script >
</ head >
< body >
     <!-- 测试图片显示效果 -->
     < div >
     < p >测试图片显示效果----点击下面图片显示大图效果 </ p >
     < ul  class ="imgUl" >
        < li  class ="imgbox"  href ="testImg/1.jpg"  title ="01图片" >< img  src ="testImg/1-s.jpg"  title ="01" /></ li >
        < li  class ="imgbox"  href ="testImg/2.jpg"  title ="02图片" >< img  src ="testImg/2-s.jpg"  title ="02" /></ li >
        < li  class ="imgbox"  href ="testImg/3.jpg"  title ="03图片" >< img  src ="testImg/3-s.jpg"  title ="03" /></ li >
        < li  class ="imgbox"  href ="testImg/4.jpg"  title ="04图片" >< img  src ="testImg/4-s.jpg"  title ="04" /></ li >
        < li  class ="imgbox"  href ="testImg/5.jpg"  title ="05图片" >< img  src ="testImg/5-s.jpg"  title ="05" /></ li >      
     </ ul >
     < ul  class ="imgUl"  style ="clear:left;" >
         < li  class ="imgbox"  href ="testImg/6.jpg"  title ="06图片" >< img  src ="testImg/6-s.jpg"  title ="06" /></ li >
        < li  class ="imgbox"  href ="testImg/7.jpg"  title ="07图片" >< img  src ="testImg/7-s.jpg"  title ="07" /></ li >
        < li  class ="imgbox"  href ="testImg/8.jpg"  title ="08图片" >< img  src ="testImg/8-s.jpg"  title ="08" /></ li >
        < li  class ="imgbox"  href ="testImg/9.jpg"  title ="09图片" >< img  src ="testImg/9-s.jpg"  title ="09" /></ li >
     </ ul >
     </ div >
     < div  id ="lightbox" >
     < div  id ="close" ></ div >
         < img  src =""   /></ img >
         < div >
             </ div >
     </ div >
< p  style ="clear:left; margin-top:30px;" >     < a  href ="www.51yyx.com" >点击查看更多插件效果！！！ </ a ></ p >
</ body >
</ html >

 

 

 

转载于:https://www.cnblogs.com/Jaylong/archive/2011/12/19/jQuery-imgBox.html