Team:HZAU-China/Human practice

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
<head>
<head>
-
<script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<style>
+
<style type="text/css">
-
body { font-size:12px; padding:0}
+
.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>
</style>
-
<script language="javascript">
+
</head>
-
pic={
+
<body>
-
href:"https://static.igem.org/mediawiki/2013/f/fd/%E7%BD%91%E9%A1%B5%E6%A0%87%E9%A2%98%EF%BC%88%E6%97%A0igem%E5%9B%BE%E6%A0%87%EF%BC%89.jpg";
+
<div class="zoomPan" id="zoomPan">
-
boxSize:250;
+
    <img src="http://www.codefans.net/jscss/demoimg/201008/s.jpg" alt="" />
-
width:1330;
+
    <div id="zoom" class="sh"><img src="http://www.codefans.net/jscss/demoimg/201008/b.jpg" alt="" /></div>
-
height:2128;
+
</div>
-
creatImg:function(id){//创建图片
+
</body>
-
var width = $("#"+id).css("width");
+
<script type="text/javascript">
-
$("#"+id).append("<img src='"+this.href+"'  style='width:"+width+"'/>");
+
//<![CDATA[
-
$("#"+id).append("<div id='bigImg'></div>");
+
function zoomBox() {this.index.apply(this, arguments)}
-
+
zoomBox.prototype = {
-
var that = this;
+
    index: function(win,zoom) {
-
$("#"+id).mousemove(function(e){
+
        var win=document.getElementById(win);
-
var x = e.pageX-$(this).offset().left;
+
        var box=document.getElementById(zoom);
-
var y = e.pageY-$(this).offset().top;
+
        var img=box.getElementsByTagName('IMG')[0];
-
if((x<parseInt(width) && x>0) && (y<that.height/that.multiple() && y>0)){
+
        var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
-
$("#bigImg").fadeIn(200);
+
        var z=Math.round(box.offsetWidth/2);
-
that.creatBigImg(x,y);
+
        win.onmousemove=function (e){
-
}else{
+
            e = e || window.event;
-
$("#bigImg").fadeOut(200);
+
            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';
-
multiple:function(id){//和实际图片的倍数关系
+
            img.style.left=-x*zoom+z+'px';
-
return this.width/parseInt($("#pic").css("width"));
+
            img.style.top=-y*zoom+z+'px';
-
},
+
        }
-
+
        win.onmouseover=function (){box.style.display=''}
-
bigBoxPost:function(x,y){//大图的坐标
+
    }
-
return [x-this.boxSize/2,y-this.boxSize/2];
+
};
-
},
+
window.onload=function (){
-
+
    x=new zoomBox('zoomPan','zoom')
-
bigLoadPost:function(x,y){//大图的坐标
+
-
return [-(x*this.multiple()-this.boxSize/2),-(y*this.multiple()-this.boxSize/2)];
+
-
},
+
-
+
-
creatBigImg:function(x,y){
+
-
var that = this;
+
-
$("#bigImg").css({
+
-
width:that.boxSize;
+
-
height:that.boxSize;
+
-
border:"#FFF 5px solid";
+
-
position:"absolute";
+
-
top:that.bigBoxPost(x,y)[1];
+
-
left:that.bigBoxPost(x,y)[0];
+
-
background:"url("+that.href+") no-repeat";
+
-
backgroundPosition:that.bigLoadPost(x,y)[0]+"px "+that.bigLoadPost(x,y)[1]+"px"
+
-
})
+
-
}
+
}
}
-
$(document).ready(function(){
+
//]]>
-
pic.creatImg("pic");
+
-
})
+
</script>
</script>
-
</head>
 
-
<body >
 
-
<div id="pic" style=" width:1000px; position: relative; margin:100px;"></div>
 
-
</body >
 
</html>
</html>
{{:Team：HZAU-China/background-footer}}
{{:Team：HZAU-China/background-footer}}
<br/>
<br/>

Revision as of 05:23, 2 September 2013


Retrieved from "http://2013.igem.org/Team:HZAU-China/Human_practice"