Talk:Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
(Replaced content with "<title>JS放大小图为大图</title> <img src="/images/logo_s.gif" onMouseOver="this.width=this.width*2;" onMouseOut="this.width=this.width/2;">")
Line 1: Line 1:
-
<title>JS放大小图为大图</title>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<img src="/images/logo_s.gif" onMouseOver="this.width=this.width*2;" onMouseOut="this.width=this.width/2;">
+
<html xmlns="http://www.w3.org/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(http://www.codefans.net/jscss/demoimg/201106/bgpic1.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.codefans.net/jscss/demoimg/201106/cursor_out.cur),pointer\9;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.codefans.net/jscss/demoimg/201106/cursor_in.cur),pointer\9;vertical-align:bottom;}
 +
.text{ width:559px; height:76px; background:url(http://www.codefans.net/jscss/demoimg/201106/bgpic2.jpg) no-repeat; margin:0 auto;}
 +
.icon1,.icon2,.icon3{ width:24px; height:21px; overflow:hidden; background:url(http://www.codefans.net/jscss/demoimg/201106/icon1.gif) no-repeat; display:block; float:left; display:inline; margin:0 10px 0 0;}
 +
.icon2{ background:url(http://www.codefans.net/jscss/demoimg/201106/icon2.gif) no-repeat;}
 +
.icon3{ background:url(http://www.codefans.net/jscss/demoimg/201106/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"><img width="150" height="150" onload="drawImage(this)" src="http://www.codefans.net/jscss/demoimg/wall8.jpg" /></div>
 +
        <div class="photo2">
 +
        <div class="button">
 +
            <a href="javascript:void(0);" class="icon1" title="逆时针旋转"></a>
 +
                <a href="javascript:void(0);" class="icon2" title="顺时针旋转"></a>
 +
                <a href="javascript:void(0);" class="icon3" title="查看原图"></a>
 +
            </div>
 +
        <img width="400" height="400" onload="drawImage(this)" src="http://www.codefans.net/jscss/demoimg/wall8.jpg" />
 +
        </div>
 +
    </div>
 +
    <div class="text"></div>
 +
</div>
 +
</body>
 +
</html>

Revision as of 09:48, 6 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 微博，QQ空间图片预览效果

Retrieved from "http://2014.igem.org/Talk:Team:LZU-China/tempfortest"