add Ox.Flipbook
This commit is contained in:
parent
4a55d5c4d4
commit
1168abcbb8
1 changed files with 97 additions and 0 deletions
|
@ -10687,6 +10687,103 @@ requires
|
|||
|
||||
};
|
||||
|
||||
Ox.Flipbook = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
frame = $('<img>').css({
|
||||
'position': 'absolute',
|
||||
'width': '100%',
|
||||
'height': 'auto'
|
||||
})
|
||||
.hide(),
|
||||
icon = $('<img>').css({
|
||||
'position': 'absolute',
|
||||
'width': '100%',
|
||||
'height': 'auto'
|
||||
}),
|
||||
frames = {},
|
||||
timestamp = $('<div>').css({
|
||||
'position': 'absolute',
|
||||
'text-align': 'center',
|
||||
'width': '100%',
|
||||
})
|
||||
.hide(),
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
frames: {},
|
||||
duration: 0,
|
||||
icon: '',
|
||||
})
|
||||
.options(options || {})
|
||||
.append(icon)
|
||||
.append(frame)
|
||||
.append(timestamp)
|
||||
.mouseover(function() {
|
||||
frame.show();
|
||||
timestamp.show();
|
||||
icon.hide();
|
||||
})
|
||||
.mousemove(function(event) {
|
||||
var position = getPosition(event),
|
||||
image = getFrame(position),
|
||||
frameHeight = image.height;
|
||||
frame.attr('src', image.src);
|
||||
timestamp.html(Ox.formatDuration(position, 'short'));
|
||||
|
||||
var height = (that.height() - frameHeight)/2;
|
||||
frame.css({'top': height + 'px'});
|
||||
timestamp.css({'top': (frameHeight + height) + 'px'});
|
||||
})
|
||||
.mouseout(function() {
|
||||
frame.hide();
|
||||
timestamp.hide();
|
||||
icon.show();
|
||||
})
|
||||
.mousedown(function(event) {
|
||||
that.triggerEvent('click', {
|
||||
'position': getPosition(event)
|
||||
});
|
||||
});
|
||||
|
||||
function getPosition(event) {
|
||||
var position = Math.floor(event.clientX - that.offset().left);
|
||||
position = (position / that.width()) * self.options.duration;
|
||||
return position;
|
||||
}
|
||||
|
||||
function getFrame(position) {
|
||||
var frame;
|
||||
$.each(frames, function(i, img) {
|
||||
if(!frame || i <= position)
|
||||
frame = img;
|
||||
});
|
||||
return frame;
|
||||
}
|
||||
|
||||
function cacheFrames() {
|
||||
$.each(self.options.frames, function(i, src) {
|
||||
frames[i] = new Image();
|
||||
frames[i].onload = function() {
|
||||
frameHeight = frames[i].height / frames[i].width * that.width();
|
||||
}
|
||||
frames[i].src = src;
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == 'frames') {
|
||||
cacheFrames();
|
||||
} else if (key == 'icon') {
|
||||
icon.attr('src', value);
|
||||
}
|
||||
}
|
||||
|
||||
if(options.icon)
|
||||
icon.attr('src', options.icon);
|
||||
cacheFrames();
|
||||
return that;
|
||||
};
|
||||
|
||||
Ox.LargeTimeline = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
|
|
Loading…
Reference in a new issue