会社のホームページリニューアルに伴い、コーディングをやる事になったのでここ２ヶ月くらいJavascriptをよくいじっている。
もっぱら'Prototype.jsライブラリ'に依存してはいるが、それでもいろいろと勉強になっている。
CSSの"background-image"をずらしながらマウスオーバーのちょっとしたアニメーションみたいなものを以前作っていたが、今回は画像を使わずに実装してみた。
画像を使わないと何がうれしいかっていうと、いろんな色で作れるという事だ。画像の場合はその都度画像から作成しなければならない。
ソースコードは以下のような感じ（要Prototype.js）
サンプルはこちら
var FancyMenu = Class.create({
initialize: function(parents, color) {
this.elem = parents.down();
this.pos = parents.cumulativeScrollOffset();
this.dim = parents.getDimensions();
this.bg = new Element('div');
this.width = 0;
this.bg.setStyle({
position: 'absolute',
height: this.dim.height + 'px',
backgroundColor: color
});
parents.insert({top: this.bg});
this.cacheMove = this.move.bindAsEventListener(this);
this.cacheMoveRelease = this.moveRelease.bindAsEventListener(this);
this.elem.observe('mouseover', this.cacheMove);
this.elem.observe('mouseout', function(event) {this.captured = false;}.bind(this));
},
move: function(event) {
this.captured = true;
if (this.timeId2) clearInterval(this.timeId2);
var that = this;
this.timeId = setInterval(function() {
that.width += 2;
that.bg.setStyle({width: that.width + 'px'});
if (!that.captured) {
that.cacheMoveRelease();
} else if (that.width >= that.dim.width) {
clearInterval(that.timeId);
that.bg.setStyle({width: that.dim.width + 'px'});
that.elem.observe('mouseout', that.cacheMoveRelease);
}
}, 15);
},
moveRelease: function(event) {
if (this.timeId) clearInterval(this.timeId);
this.elem.stopObserving('mouseout', this.cacheMoveRelease);
var that = this;
this.timeId2 = setInterval(function() {
that.width -= 2;
that.bg.setStyle({width: that.width + 'px'});
if (that.width <= 0) {
clearInterval(that.timeId2);
that.bg.setStyle({width: '0px'});
}
}, 15);
}
});
カテゴリ：
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/50
コメントする