jq图片点击居中放大原始图片兼容ie

时间：2023-03-08 20:09:40
 /*

  *鍥剧墖澶у浘鏄剧ず

  */

 function imgshow(){

     content_div:"";//内容

     bg_div:"";//背景变暗

     img_div:"";//图片

     prev_div:"";//上一页

     next_div:"";//下一页

     $(content_div).find("img").click(function(){

     var img = new Image();

     img.src =$(this).attr("src") ;

     num=$(content_div).find("img").length;

     imgcount=$(content_div).find("img").index($(this));

     var src=$(content_div).find("img").eq(imgcount).attr("src");

     var imgWidth=img.width;

     var imgHeiht=img.height;

     wh=document.documentElement.clientHeight;

     ww=document.documentElement.clientWidth;

     marginH=(wh-imgHeiht)/2;

     marginW=(ww-imgWidth)/2;

     $(img_div).css({"top":marginH,"left":marginW});

     //alert(www);

     $(bg_div).css({"width":ww,"height":wh});

     $(bg_div).css({"display":"block"});

     $(img_div).html("<img src='"+src+"'>");

     $(prev_div).html("<h1><</h1>");

     $(next_div).html("<h1>></h1>");

     $(prev_div).css({"top":wh/2,"left":"50px"});

     $(next_div).css({"top":wh/2,"right":"50px"});

     //$(".big-img:after").css({"top":-h});

     $(img_div).show("slow");

     $(img_div).find("img").css({"max-height":wh,"max-width":ww});

   })

   $(prev_div).click(function(){

     if(imgcount!=0){

     var src=$("#content-detailed img").eq(imgcount-1).attr("src");

     $(img_div).html("<img src='"+src+"'>");

     var imgWidth=$(img_div).find("img").width();

     var imgHeiht=$(img_div).find("img").height();

     //alert(imgWidth);

     wh=document.documentElement.clientHeight;

     ww=document.documentElement.clientWidth;

     marginH=(wh-imgHeiht)/2;

     marginW=(ww-imgWidth)/2;

     $(img_div).css({"top":marginH,"left":marginW});

     $(img_div).find("img").css({"max-height":wh,"max-width":ww});

     $(img_div).hide();

     $(img_div).show("slow");

     imgcount--;

     }

   })

   $(next_div).click(function(){

     if(imgcount<num-1){

     var src=$("#content-detailed img").eq(imgcount+1).attr("src");

     $(img_div).html("<img src='"+src+"'>");

     var imgWidth=$(img_div).find("img").width();

     var imgHeiht=$(img_div).find("img").height();

     //alert(imgWidth);

     wh=document.documentElement.clientHeight;

     ww=document.documentElement.clientWidth;

     marginH=(wh-imgHeiht)/2;

     marginW=(ww-imgWidth)/2;

     $(img_div).css({"top":marginH,"left":marginW});

     $(img_div).find("img").css({"max-height":wh,"max-width":ww});

     $(img_div).hide();

     $(img_div).show("slow");

     imgcount++;

     }

   })

   $(bg_div).click(function(){

       $(img_div).hide("slow");

       $(prev_div).html("");

       $(next_div).html("");

       $(img_div).html("");

       $(bg_div).css({"display":"none"});

   })

   }
css：
 div.big-img{position: fixed;z-index:; display: none;border-radius: 5px;}

 div.big-img img{border-radius: 5px;}

 div.prev{position: fixed;z-index:;color: #fff;cursor: pointer;text-shadow: 0 0 10px #666;}

 div.next{position: fixed;z-index:;color: #fff;cursor: pointer;text-shadow: 0 0 10px #666;}

 #bgDiv {

     z-index:;

     display: block;

     position: fixed;

     top: 0px;

     left: 0px;

     right:0px;

     background-color: #000;

     filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);

     opacity: 0.6;

 }

 5     content_div:"";//内容

 6     bg_div:"";//背景变暗

 7     img_div:"";//图片

 8     prev_div:"";//上一页

 9     next_div:"";//下一页

只需引用js，设置上面的div的id或者class

相关文章