如何单击按钮能够将一张图片全屏显示

  就像H2M的网站效果那样，有个quicklook的效果 http://www.hm.com/cn/subdepartment/MEN?Nr=4294959417

解决方案 »

  1.   

    有现成的插件,lightbox
    自己找吧
      

  2.   


    <script>
    var tanc=document.createElement("div");
    var pic=document.createElement("img");
    var del=document.createElement("div");
    del.innerHTML="x";
    del.style.cssText+="color:red;font-size:10px;";
    pic.src="";//当前图片的地址
    pic.style.height=document.body.clientHeight+"px";
    pic.style.width=document.body.clientWidth+"px";
    tanc.style.zIndex=3;
    tanc.appendChild(del);
    tanc.appendChild(pic);
    document.appendChild(tanc);
    del.onclick=function(){
        document.removeChild(tanc);
    }
    </script>
      

  3.   

    2楼代码有错误，改了下：del.innerHTML="<center><h1>x</h1></center>";
    //不设一下的话，显示的X太小了
    ...document.body.appendChild(tanc);
    del.onclick=function(){
      document.body.removeChild(tanc);
    }
      

  4.   

    2楼代码有错误，改了下：//下面这处应该把del的高度刨除掉
    pic.style.height=document.body.clientHeight+"px";//主要是这两句有错，应改成这样
    document.body.appendChild(tanc);
    del.onclick=function(){
      document.body.removeChild(tanc);
    }实际上根本不必用del那个DIV，显示和操作都不方便。
    整个修改过的代码如下：
    <body>
    <script>
    var tanc=document.createElement("div");
    var pic=document.createElement("img");
    pic.src="http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg";//当前图片的地址
    pic.style.height=(document.body.clientHeight-20)+"px";
    pic.style.width=document.body.clientWidth+"px";
    pic.title="点击图片以关闭";
    tanc.style.zIndex=3;
    tanc.appendChild(pic);
    document.body.appendChild(tanc);
    pic.onclick=function(){
      document.body.removeChild(tanc);
    }
    </script>
    </body>当然，也有1楼所说其它现成插件。当系统中很多方面的功能整理出来，应该决定用或不用插件，以及用哪种插件合适，这是前台开发应有的能力。