1.层居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.9.1.js"></script> </head> <body> <div id="pop"> <img src="1.jpg" alt="¥" class="aboutus_img" /> </div> <script type="text/javascript"> showDiv($("#pop")); function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){ center(obj); }); $(window).resize(function(){ center(obj); }); } function center(obj){ var width = $('body').width(); $(obj).css({ "position": "absolute", "left": width/2-200, "top": '160px' }); } </script> </body> </html>
2.弹出层
<html> <head> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function() { $(".aboutus_img").click(function(){ //加入一个DIV(暗层),加入BODY中 var background = $("<div></div>"); $(background).attr("id","overlaybackground").animate({ 'opacity':'.6' },0).css({ "width" : $(document).width(), 'height' : $(document).height(), 'background' : '#656565', 'z-index' : '100', 'position': 'absolute', 'top' : '0px', 'left' : '0px' }); $("body").append(background); //将加入一个图片 var newimage = $("<img/>"); var width = $('body').width(); $(newimage).attr("src",$(this).attr("src")).attr("id","largeimage").css({ 'left' : width/2-200, 'top' : '160px', 'position': 'absolute', 'z-index' : '500', 'display' : 'none' }); $("#largeimage").attr("src",$(this).attr("src")); //重新赋予值 $("body").append(newimage); //将图片滑出效果完成 $("#largeimage").fadeIn(2000,function(){ $(this).click(function(){ $(this).fadeOut(1000); $("div#overlaybackground").fadeOut(1000,function(){ $(this).remove(); }) }) }) }); }) </script> </head> <body> <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <br/><br/><br/><br/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> </body> </html>