jquery层居中,点击小图查看大图,弹出层居中代码

最新推荐文章于 2024-10-30 18:24:25 发布

dfsafsd32323

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量100

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/simpledev/p/3566280.html

版权

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>