Tip: you can modify some code before running
<!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=utf-8" /><title>QQ space click to bring up the image amplification code</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(http://www.miaov.com/miaov_demo/qzone/img/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(http://www.miaov.com/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(http://www.miaov.com/miaov_demo/qzone/img/cursor_in.cur),pointer9;vertical-align:bottom;}.text{ width:559px; height:76px; background:url(http://www.miaov.com/miaov_demo/qzone/img/bg2.jpg) no-repeat; margin:0 auto;}.icon1,.icon2,.icon3{ width:24px; height:21px; overflow:hidden; background:url(http://www.miaov.com/miaov_demo/qzone/img/icon1.gif) no-repeat; display:block; float:left; display:inline; margin:0 10px 0 0;}.icon2{ background:url(http://www.miaov.com/miaov_demo/qzone/img/icon2.gif) no-repeat;}.icon3{ background:url(http://www.miaov.com/miaov_demo/qzone/img/icon3.gif) no-repeat;}</style><script>window.onload = function(){var oMain = document.getElementById('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 : oElem.getElementsByTagName(strTagName);var returnArrElements = new Array(); var oRegExp = new RegExp('(^|s)' + strClassName + '($|s)'); for(var i=0; i<arrElements.length; i++){ if (oRegExp.test(arrElements[i].className)){ returnArrElements.push(arrElements[i]); } } 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 = elementClassName.replace((new RegExp("(^|s)" + className + "(s|$)"))," ");}}function next(elem){do{elem = elem.nextSibling;} while(elem && elem.nodeType != 1);return elem;}function prev(elem){ do{ elem = elem.previousSibling; } while(elem && elem.nodeType != 1); return elem;}function first(elem){elem = elem.firstChild;return elem && elem.nodeType != 1 ?next(elem) : elem;}function last(elem){ elem = elem.lastChild; return elem && elem.nodeType != 1 ? prev(elem) : elem;}</script></head><body><div id="main" class="main"><div class="box"> <div class="photo"></div> <div class="photo2"> <div class="button"> </div> </div> </div> <div class="text"></div> <div class="box"> <div class="photo"></div> <div class="photo2"> <div class="button"> </div> </div> </div> <div class="text"></div> <div class="box"> <div class="photo"></div> <div class="photo2"> <div class="button"> </div> </div> </div> <div class="text"></div></div></body></html>
Tip: you can modify some code before running
