jquery - 이미지 클릭시 확대하기

<head>

    <script type="text/javascript"> 

        function resizeImg(osrc) 

        { 

            var bdiv =document.createElement('DIV'); 

            document.body.appendChild(bdiv); 

            bdiv.setAttribute("id", "bdiv"); 

            bdiv.style.position = 'absolute'; 

            bdiv.style.top = 0; 

            bdiv.style.left = 0; 

            bdiv.style.zIndex = 0; 

            bdiv.style.width = document.body.scrollWidth; 

            bdiv.style.height = document.body.scrollHeight; 

            bdiv.style.background = 'gray'; 

            //bdiv.style.filter = "alpha(opacity=75)";

            bdiv.style.opacity = '0.5';

            //bdiv.style.mozOpacity = '0.5';

            var odiv = document.createElement('DIV'); 

            document.body.appendChild(odiv); 

            odiv.style.zIndex = 1; 

            odiv.setAttribute("id", "odiv"); 

            odiv.innerHTML = "<a href='javascript:void(closeImg())'><img id='oimg' src='"+osrc+"' border='0' /></a>"; 

            var img = document.all['oimg']; 

            var owidth = (document.body.clientWidth)/2 - (img.width)/2; 

            var oheight = (document.body.clientHeight)/2 - (img.height)/2; 

            odiv.style.position = 'absolute'; 

            odiv.style.top = oheight + document.body.scrollTop; 

            odiv.style.left = owidth; 

            scrollImg(); 

        }

        function resizeImg2(osrc) 

        { 

            var bdiv =document.createElement('DIV'); 

            document.body.appendChild(bdiv); 

            bdiv.setAttribute("id", "bdiv"); 

            bdiv.style.position = 'absolute'; 

            bdiv.style.top = 0; 

            bdiv.style.left = 0; 

            bdiv.style.zIndex = 0; 

            bdiv.style.width = document.body.scrollWidth; 

            bdiv.style.height = document.body.scrollHeight; 

            bdiv.style.background = 'gray'; 

            //bdiv.style.filter = "alpha(opacity=75)";

            bdiv.style.opacity = '0.5';

            //bdiv.style.mozOpacity = '0.5';

            var odiv = document.createElement('DIV'); 

            document.body.appendChild(odiv); 

            odiv.style.zIndex = 1; 

            odiv.setAttribute("id", "odiv"); 

            odiv.innerHTML = "<a href='javascript:void(closeImg())'><img id='oimg' src='"+osrc+"' border='0' width='700' height='400'/></a>"; 

            var img = document.all['oimg']; 

            var owidth = (document.body.clientWidth)/2 - (img.width)/2; 

            var oheight = (document.body.clientHeight)/2 - (img.height)/2; 

            odiv.style.position = 'absolute'; 

            odiv.style.top = oheight + document.body.scrollTop; 

            odiv.style.left = owidth; 

            scrollImg(); 

        }

        function scrollImg() 

        { 

            var odiv = document.all['odiv']; 

            var img = document.all['oimg']; 

            var oheight = (document.body.clientHeight)/2 - (img.height)/2 + document.body.scrollTop; 

            odiv.style.top = oheight; 

            settime = setTimeout(scrollImg, 100); 

        } 

        function closeImg() 

        { 

            document.body.removeChild(odiv); 

            document.body.removeChild(bdiv); 

            clearTimeout(settime); 

        } 

    </script> 

</head> 

<body>

<div>

<img src="/images/15.jpg" height="200" width="300" onclick="resizeImg(this.src)" />

</div>

<br>

<br>

<img src="/images/15s.jpg" height="200" width="300" onclick="resizeImg2(this.src)" />

<br>

<br>

<img src="/images/15.jpg"/>

</body>
이미지 클릭시 확대하기

단축키

Articles
