Talk:Team:LZU-China/tempfortest
From 2014.igem.org
(Difference between revisions)
(6 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
- | <meta http-equiv=" | + | <title>鼠标点击图片放大或缩小</title> |
- | < | + | <meta http-equiv="content-type" content="text/html;charset=gb2312"> |
- | + | <style type="text/css"> | |
- | + | #box{border:solid 1px #000;margin:10px 0 0 10px;width:420px;height:300px;overflow:hidden;} | |
+ | #box img{width:100%;height:100%;} | ||
+ | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | + | function $(id){ return typeof id=="string"? document.getElementById(id):id;} | |
- | + | function $$(tag,parent) {return ($(parent)||document).getElementsByTagName(tag);} | |
- | + | function zoomImg(container){ | |
- | + | var obox=$(container), w=obox.clientWidth, h=obox.clientHeight, zoom=false, pic=$$("img","box")[0], | |
- | + | img=new Image(), W, H; | |
- | + | img.src=pic.src; | |
- | + | W=img.width; H=img.height; | |
- | + | var flowX=W-w, flowY=H-h, bound=obox.getBoundingClientRect(); | |
- | + | window.onscroll=function(){bound=obox.getBoundingClientRect();}; | |
- | + | obox.onclick=function(e){ | |
- | + | e=e||window.event; | |
- | + | if(zoom){ | |
- | } | + | zoom=false; |
- | + | pic.style.width="100%"; | |
- | + | pic.style.height="100%"; | |
- | + | pic.style.marginLeft=pic.style.marginTop="0px"; | |
- | } | + | } |
- | + | else { | |
- | + | zoom=true; | |
- | + | pic.style.width=W+"px"; | |
- | + | pic.style.height=H+"px"; | |
- | + | pic.style.marginLeft=(-(e.clientX-bound.left)/w*flowX)+"px"; | |
- | }; | + | pic.style.marginTop=(-(e.clientY-bound.top)/h*flowY)+"px"; |
- | + | } | |
- | + | }; | |
- | + | obox.onmousemove=function(e){ | |
- | } | + | if(zoom){ |
+ | e=e||window.event; | ||
+ | pic.style.marginLeft=(-(e.clientX-bound.left)/w*flowX)+"px"; | ||
+ | pic.style.marginTop=(-(e.clientY-bound.top)/h*flowY)+"px"; | ||
+ | } | ||
+ | }; | ||
+ | obox.onmouseout=function(e){ | ||
+ | if(zoom){ | ||
+ | zoom=false; | ||
+ | pic.style.width="100%"; | ||
+ | pic.style.height="100%"; | ||
+ | pic.style.marginLeft=pic.style.marginTop="0px"; | ||
+ | } | ||
+ | }; | ||
+ | } | ||
+ | window.onload=function(){ | ||
+ | zoomImg("box"); | ||
+ | }; | ||
</script> | </script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</head> | </head> | ||
<body> | <body> | ||
- | + | 鼠标点击图片放大或缩小<br> | |
- | + | <div id="box"><img src="http://www.codefans.net/jscss/demoimg/201011/big.jpg"></div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 09:56, 6 September 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">