jQuery实现的点击图片放大且在当前页面查看原图

浏览数：145 / 时间：2015年06月09日

jquery在当前页面查看原图，单击图片，显示出大图片，再次单击图片，恢复网页原有状态。不刷新页面的情况下查看原图，在网上类似的应用有很多。有时候朋友们说这是无刷新放大图片的功能，其实也就那么一回事吧，不过从本款代码来看，这功能实现起来并不太复杂，引入了jQuery，代码分享给大家。

<!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>jQuery实现的点击图片放大且在当前页面查看原图丨北京kiddy官网|河北pvc塑料地板</title>
    <style type="text/css">
    div, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #Over {
    position: absolute;
    width: 100%;
    z-index: 100;
    left: 0px;
    top: 0px;
    }
    .img {
    width:90%;
    background-color: #FFF;
    height: 90%;
    padding: 3px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    }
    .content {
    text-align: center;
    width: 200px;
    height:150px;
    margin-right: auto;
    margin-left: auto;
    }
    .EnlargePhoto {
    cursor: pointer;
    }
    .TempContainer {
    position: absolute;
    z-index: 101;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    }
    </style>
    </head>
    <script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    var ImgsTObj = $(‘.EnlargePhoto‘);//class=EnlargePhoto的都是需要放大的图像
    if(ImgsTObj){
    $.each(ImgsTObj,function(){
    $(this).click(function(){
    var currImg = $(this);
    CoverLayer(1);
    var TempContainer = $(‘<div class=TempContainer></div>‘);
    with(TempContainer){
    appendTo("body");
    css(‘top‘,currImg.offset().top);
    html(‘<img border=0 src=‘ + currImg.attr(‘src‘) + ‘>‘);
    }
    TempContainer.click(function(){
    $(this).remove();
    CoverLayer(0);
    });
    });
    });
    }
    else{
    return false;
    }
    //====== 使用/禁用蒙层效果 ========
    function CoverLayer(tag){
    with($(‘#Over‘)){
    if(tag==1){
    css(‘height‘,$(document).height());
    css(‘display‘,‘block‘);
    css(‘opacity‘,0.9);
    css("background-color","#000");
    }
    else{
    css(‘display‘,‘none‘);
    }
    }
    }
    });
    </script>
    <body>
    <div class="content">
    <IMG class="img EnlargePhoto" src="/images/m03.jpg"><br /><br />
    <IMG class="img EnlargePhoto" src="/images/m04.jpg"><br /><br />
    </div>
    </body>
    </html>
    <br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js" target=_blank>jquery-1.6.2.min.js</a><br><hr>