|
|
| Line 1: |
Line 1: |
| | {{:Team：HZAU-China/background-head}} | | {{:Team：HZAU-China/background-head}} |
| - | <html>
| + | |
| - | <head>
| + | |
| - | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | |
| - | <style type="text/css">
| + | |
| - | .zoomPan{width:570px;left:100px;position:relative; }
| + | |
| - | .sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}
| + | |
| - | #zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}
| + | |
| - | #zoom img{position:relative;}
| + | |
| - | h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;}
| + | |
| - | h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;}
| + | |
| - | </style>
| + | |
| - | </head>
| + | |
| - | <body>
| + | |
| - | <div class="zoomPan" id="zoomPan">
| + | |
| - | <img src="http://www.codefans.net/jscss/demoimg/201008/s.jpg" alt="" />
| + | |
| - | <div id="zoom" class="sh"><img src="http://www.codefans.net/jscss/demoimg/201008/b.jpg" alt="" /></div>
| + | |
| - | </div>
| + | |
| - | </body>
| + | |
| - | <script type="text/javascript">
| + | |
| - | //<![CDATA[
| + | |
| - | function zoomBox() {this.index.apply(this, arguments)}
| + | |
| - | zoomBox.prototype = {
| + | |
| - | index: function(win,zoom) {
| + | |
| - | var win=document.getElementById(win);
| + | |
| - | var box=document.getElementById(zoom);
| + | |
| - | var img=box.getElementsByTagName('IMG')[0];
| + | |
| - | var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
| + | |
| - | var z=Math.round(box.offsetWidth/2);
| + | |
| - | win.onmousemove=function (e){
| + | |
| - | e = e || window.event;
| + | |
| - | var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
| + | |
| - | if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
| + | |
| - | x-=ori.left;
| + | |
| - | y-=ori.top;
| + | |
| - | box.style.left=x-z+'px';
| + | |
| - | box.style.top=y-z+'px';
| + | |
| - | img.style.left=-x*zoom+z+'px';
| + | |
| - | img.style.top=-y*zoom+z+'px';
| + | |
| - | }
| + | |
| - | win.onmouseover=function (){box.style.display=''}
| + | |
| - | }
| + | |
| - | };
| + | |
| - | window.onload=function (){
| + | |
| - | x=new zoomBox('zoomPan','zoom')
| + | |
| - | }
| + | |
| - | //]]>
| + | |
| - | </script>
| + | |
| - | </html>
| + | |
| | {{:Team：HZAU-China/background-footer}} | | {{:Team：HZAU-China/background-footer}} |
| | <br/> | | <br/> |
"
