jquery层居中,点击小图查看大图,弹出层居中代码
http://www.cnblogs.com/simpledev/p/3566280.html
见第一版，发现一个情况，如果页面内容多出一屏的情况下，点击查看图片的时候，弹出的层图片在最上面居中，并没有在当前的滚动栏处屏幕居中。修改代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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', 'position': 'fixed', '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> <style type="text/css"> #low_right { position: fixed; width: 98%; text-align: center; } </style> </head> <body> <div id="low_right" align="center"> 导航栏固定在顶部位置 <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> </div> <br/><br/> <br/><br/> <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"/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/> </body> </html>
主要修改：//'position': 'absolute',
'position': 'fixed', 改成固定位置，而不是相对位置。
样式low_right控制层不管滚动栏拉到下面，层一直固定在顶部。 另外：ie9浏览器如果没有顶部说明<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这个效果出不来。在google,firefox浏览器中没有问题。