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> | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
- | <img | + | <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">