Team:XMU-China/photogallery

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!doctype html>
 
<html>
<html>
<head>
<head>
Line 60: Line 59:
<body>
<body>
-
<h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2>
 
<div id="slider" class="slide-wp">
<div id="slider" class="slide-wp">
<ul>
<ul>
Line 132: Line 130:
   this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
   this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
   this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
   this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
 +
  this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
 +
  this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
 +
  },
 +
  anim : function (i) {
 +
  var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
 +
  if (w2 == this.w) {
 +
    clearInterval(this.li[i].a);
 +
    HR.$$('img', this.a1)[0].width = 0;
 +
    HR.$$('img', this.a2)[0].width = this.w;
 +
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
 +
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
 +
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
 +
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
 +
  }else {
 +
    HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
 +
    HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
 +
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
 +
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
 +
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
 +
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
 +
    if (!this.au) this.auto();
 +
  }
 +
  },
 +
  auto : function () {
 +
  var _this = this;
 +
  this.au = setInterval(function(){_this.move()}, this.at*1000);
 +
  },
 +
  move : function () {
 +
  var n = this.cur==this.l-1 ? 0 : this.cur+1;
 +
  this.pos(n);
 +
  }
 +
}
 +
return init;
 +
}();
 +
var mySlider = new HR.slider3D({
 +
id: 'slider',
 +
maskSize: 6,
 +
navId: 'nav',
 +
auto: 4
 +
})</script></body>
 +
</html>olid solid dashed dashed;border-width:0px';
   this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
   this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
   this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
   this.li[i].a = setInterval(function(){_this.anim(i)}, 20);

Revision as of 03:39, 23 September 2012

olid solid dashed dashed;border-width:0px'; 

  this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
  this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
 },
 anim : function (i) {
  var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
  if (w2 == this.w) {
   clearInterval(this.li[i].a);
   HR.$$('img', this.a1)[0].width = 0;
   HR.$$('img', this.a2)[0].width = this.w;
   this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
   this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
   this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
   this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
  }else {
   HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
   HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
   this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
   this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
   this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
   this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
   if (!this.au) this.auto();
  }
 },
 auto : function () {
  var _this = this;
  this.au = setInterval(function(){_this.move()}, this.at*1000);
 },
 move : function () {
  var n = this.cur==this.l-1 ? 0 : this.cur+1;
  this.pos(n);
 }
}
return init;

}(); var mySlider = new HR.slider3D({ 

id: 'slider',
maskSize: 6,
navId: 'nav',
auto: 4

})</script></body> </html>

Retrieved from "http://2012.igem.org/Team:XMU-China/photogallery"