|
|
| (One intermediate revision not shown) |
| Line 1: |
Line 1: |
| | {{:Team：HZAU-China/background-head}} | | {{:Team：HZAU-China/background-head}} |
| - | <html>
| + | |
| - | <head>
| + | |
| - | <script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
| + | |
| - | <style>
| + | |
| - | body { font-size:12px; padding:0}
| + | |
| - | </style>
| + | |
| - | <script language="javascript">
| + | |
| - | pic={
| + | |
| - | 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";
| + | |
| - | boxSize:250;
| + | |
| - | width:1330;
| + | |
| - | height:2128;
| + | |
| - | creatImg:function(id){//创建图片
| + | |
| - | var width = $("#"+id).css("width");
| + | |
| - | $("#"+id).append("<img src='"+this.href+"' style='width:"+width+"'/>");
| + | |
| - | $("#"+id).append("<div id='bigImg'></div>");
| + | |
| - |
| + | |
| - | var that = this;
| + | |
| - | $("#"+id).mousemove(function(e){
| + | |
| - | var x = e.pageX-$(this).offset().left;
| + | |
| - | var y = e.pageY-$(this).offset().top;
| + | |
| - | if((x<parseInt(width) && x>0) && (y<that.height/that.multiple() && y>0)){
| + | |
| - | $("#bigImg").fadeIn(200);
| + | |
| - | that.creatBigImg(x,y);
| + | |
| - | }else{
| + | |
| - | $("#bigImg").fadeOut(200);
| + | |
| - | }
| + | |
| - | });
| + | |
| - |
| + | |
| - | },
| + | |
| - |
| + | |
| - | multiple:function(id){//和实际图片的倍数关系
| + | |
| - | return this.width/parseInt($("#pic").css("width"));
| + | |
| - | },
| + | |
| - |
| + | |
| - | bigBoxPost:function(x,y){//大图的坐标
| + | |
| - | return [x-this.boxSize/2,y-this.boxSize/2];
| + | |
| - | },
| + | |
| - |
| + | |
| - | 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>
| + | |
| - | </head>
| + | |
| - | <body >
| + | |
| - | <div id="pic" style=" width:1000px; position: relative; margin:100px;"></div>
| + | |
| - | </body >
| + | |
| - | </html>
| + | |
| | {{:Team：HZAU-China/background-footer}} | | {{:Team：HZAU-China/background-footer}} |
| | <br/> | | <br/> |
"
