Talk:Team:LZU-China/tempfortest
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
- | <title> | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
- | < | + | <head> |
+ | <title>鼠标点击图片放大或缩小</title> | ||
+ | <meta http-equiv="content-type" content="text/html;charset=gb2312"> | ||
<style type="text/css"> | <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> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | $(function(){ | + | 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> | |
- | < | + | <body> |
- | < | + | 鼠标点击图片放大或缩小<br> |
- | < | + | <div id="box"><img src=""></div> |
+ | </body> | ||
+ | </html> |
Revision as of 09:55, 6 September 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">