<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qq空间点击弹出图片放大效果代码</title>
<style>
*{ margin:0; padding:0;}
body { background:#333; }
.main{ width:890px; height:auto; overflow:hidden; background:#303030;}
.box{ width:559px; height:auto; background:url(www.miaov/miaov_demo/qzone/im
g/bg1.jpg) no-repeat center top; margin:0 auto; overflow:hidden;}
.photo{ margin:60px 0 10px 75px; overflow:hidden;}
.photo img{ padding:5px; border:1px #3d3d3d solid; cursor:-moz-zoom-in;cursor:-o-zoom-in; cursor:-webkit-zoom-in;cursor:url(www.miaov/miaov_demo/qzone/img/cursor_out.cur),pointer9;vertical-align:bottom;}
.photo2{ height:0; overflow:hidden; margin:0;}
.photo3{ height:auto; overflow:visible; margin:60px 0 10px 75px;}
.button{ overflow:hidden; margin:0 0 10px 0;}
.photo3 img{ cursor:-moz-zoom-out;cursor:-o-zoom-out; cursor:-webkit-zoom-out;cursor:url(www.miaov/miaov_demo/qzone/img/cursor_in.cur),pointer9;vertical-align:bottom;}
.
text{ width:559px; height:76px; background:url(www.miaov/miaov_demo/qzone/img/bg2.jpg) no-repeat; margin:0 auto;}
.icon1,.icon2,.icon3{ width:24px; height:21px; overflow:hidden; background:url(www.miaov/miaov_demo/qzone/img/icon1.gif) no-repeat; display:block; float:left; display:inline; margin:0 10px 0 0;}
.icon2{ background:url(www.miaov/miaov_demo/qzone/img/icon2.gif) no-repeat;}
.icon3{ background:url(www.miaov/miaov_demo/qzone/img/icon3.gif) no-repeat;}
</style>
<script>
load = function(){
    var oMain = ElementById('main');
    var aPhoto = getElementsByClassName(oMain,'div','photo');
    var aPhoto2 =  getElementsByClassName(oMain,'div','photo2');
    var aButton =  getElementsByClassName(oMain,'div','button');
    for(var i=0;i<aPhoto.length;i++){
        aPhoto[i].index = i;
        aPhoto2[i].index = i;   
        aPhoto[i].onclick = toBig;
        aPhoto2[i].onclick = toSmall;
        aButton[i].onclick = function(ev){
            var ev = ev || event;
            ev.cancelBubble = true;
        };
        aPhoto[i].style.width = first(aPhoto[i]).width + 12 +'px';
        aPhoto2[i].style.width = last(aPhoto2[i]).width + 12 +'px';
    }
    function toBig(){
        this.style.display = 'none';
        addClass(aPhoto2[this.index],'photo3');
    }
    function toSmall(){
        removeClass(this,'photo3');
        aPhoto[this.index].style.display = 'block';
    }
};
function drawImage(ImgD){
    var image = new Image();
    image.src = ImgD.src;
    var width = ImgD.width;
    var height = ImgD.height;
    if(image.width > 0 && image.height > 0){
        if(image.width / image.height >= width / height){
            if(image.width > width){
                ImgD.width = width;
                ImgD.height = (image.height * width) / image.width;
            }
            else{
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
        else{
            if(image.height > height){
                ImgD.height = height;
                ImgD.width = (image.width * height) / image.height;
            }
            else{
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
    }
}
function getElementsByClassName(oElem, strTagName, strClassName){ 
    var arrElements = (strTagName == '*' && oElem.all) ? oElem.all : ElementsByTagName(strTagName);
    var returnArrElements = new Array(); 
    var oRegExp =  new RegExp('(^|s)' + strClassName + '($|s)'); 
    for(var i=0; i<arrElements.length; i++){ 
        if (st(arrElements[i].className)){ 
            returnArrElements.push(arrElements[i]); 
            } 
        } 
javascript void 0 是什么意思
    return (returnArrElements);
}
function addClass(element, className){
    if(!element.className){
    element.className = className;
    }
    else{
        element.className+= " "+className;       
    }
}
function removeClass(element, className){
    if (!element) return;
    var elementClassName = element.className;
    if (elementClassName.length == 0) return;
    if(elementClassName == className){
        element.className = "";
        return;
    }
    if(elementClassName.match(new RegExp("(^|s)" + className + "(s|$)"))){
        element.className = place((new RegExp("(^|s)" + className + "(s|$)"))," ");
    }
}
function next(elem){
    do{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。