|
|
| Line 130: |
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); |
"
