tour
This commit is contained in:
parent
4b31e217a1
commit
be3296e472
5 changed files with 148 additions and 25 deletions
136
js/pandora.js
136
js/pandora.js
|
|
@ -2,19 +2,7 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
$(function() {
|
||||
|
||||
var $body = $('body'),
|
||||
$icon = $('#icon')
|
||||
.bind({
|
||||
click: function() {
|
||||
$('#menu > div').removeClass('selected');
|
||||
$page.empty()
|
||||
.append($('<div>').html('pan.do/ra'))
|
||||
.append(
|
||||
$('<img>').attr({
|
||||
src: 'http://0x2620.org/jpg/jpg/0xDB/Screenshots/IMG_0009.jpg'
|
||||
})
|
||||
)
|
||||
}
|
||||
}),
|
||||
$icon = $('#icon'),
|
||||
$menu = $('<div>').attr({id: 'menu'}).appendTo($body),
|
||||
$page = $('<div>').attr({id: 'page'}).appendTo($body),
|
||||
$head = $('<div>').appendTo($page);
|
||||
|
|
@ -37,7 +25,6 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
.appendTo($body);
|
||||
} else {
|
||||
$element = $('<div>')
|
||||
.addClass(page)
|
||||
.html(page)
|
||||
.appendTo($menu);
|
||||
}
|
||||
|
|
@ -61,7 +48,9 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
if (page == 'news') {
|
||||
text = pandora.pages.news.map(function(item) {
|
||||
return '<div class="title">' + item[0] + '</div>'
|
||||
+ '<div class="date">' + Ox.formatDate(item[1], '%A, %B %e, %Y') + '</div>'
|
||||
+ '<div class="date">'
|
||||
+ Ox.formatDate(item[1], '%A, %B %e, %Y')
|
||||
+ '</div>'
|
||||
+ '<div class="text">' + item[2] + '</div>';
|
||||
}).join('');
|
||||
} else if (page == 'faq') {
|
||||
|
|
@ -72,7 +61,113 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
} else if (page == 'tour') {
|
||||
text = $('<div>')
|
||||
.append(
|
||||
$('<img>').attr({src: pandora.pages.tour[tourIndex][0]})
|
||||
$('<div>')
|
||||
.addClass('tour')
|
||||
.append(
|
||||
$('<img>')
|
||||
.addClass('tour')
|
||||
.attr({
|
||||
src: pandora.pages.tour[tourIndex][0]
|
||||
})
|
||||
)
|
||||
.bind({
|
||||
click: function(e) {
|
||||
var $this = $(this), timeout;
|
||||
if (!$this.hasClass('zoom')) {
|
||||
$($this.children()[0]).stop().animate({
|
||||
width: '1280px',
|
||||
height: '800px',
|
||||
marginLeft: Math.round(
|
||||
(384 - window.scrollX - e.clientX) * 11/9
|
||||
) + 'px',
|
||||
marginTop: Math.round(
|
||||
(113 - window.scrollY - e.clientY) * 11/9
|
||||
) + 'px'
|
||||
}, 250, function() {
|
||||
var event;
|
||||
$this.addClass('zoom').bind({
|
||||
mouseenter: function(e) {
|
||||
timeout && clearTimeout(timeout);
|
||||
$this.bind({
|
||||
mousemove: function(e) {
|
||||
event = e;
|
||||
}
|
||||
})
|
||||
$($this.children()[0]).animate({
|
||||
width: '1280px',
|
||||
height: '800px',
|
||||
marginLeft: Math.round(
|
||||
(384 - window.scrollX - e.clientX) * 11/9
|
||||
) + 'px',
|
||||
marginTop: Math.round(
|
||||
(113 - window.scrollY - e.clientY) * 11/9
|
||||
) + 'px'
|
||||
}, 250, function() {
|
||||
$($this.children()[0]).animate({
|
||||
marginLeft: Math.round(
|
||||
(384 - window.scrollX - (event || e).clientX) * 11/9
|
||||
) + 'px',
|
||||
marginTop: Math.round(
|
||||
(113 - window.scrollY - (event || e).clientY) * 11/9
|
||||
) + 'px'
|
||||
}, 250, function() {
|
||||
$this.unbind('mousemove').bind({
|
||||
mousemove: function(e) {
|
||||
$($this.children()[0]).stop().css({
|
||||
width: '1280px',
|
||||
height: '800px',
|
||||
marginLeft: Math.round(
|
||||
(384 - window.scrollX - e.clientX) * 11/9
|
||||
) + 'px',
|
||||
marginTop: Math.round(
|
||||
(113 - window.scrollY - e.clientY) * 11/9
|
||||
) + 'px'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
mousemove: function(e) {
|
||||
$($this.children()[0]).stop().css({
|
||||
width: '1280px',
|
||||
height: '800px',
|
||||
marginLeft: Math.round(
|
||||
(384 - window.scrollX - e.clientX) * 11/9
|
||||
) + 'px',
|
||||
marginTop: Math.round(
|
||||
(113 - window.scrollY - e.clientY) * 11/9
|
||||
) + 'px'
|
||||
});
|
||||
},
|
||||
mouseleave: function() {
|
||||
timeout = setTimeout(function() {
|
||||
$($this.children()[0]).stop().animate({
|
||||
width: '576px',
|
||||
height: '360px',
|
||||
marginLeft: 0,
|
||||
marginTop: 0
|
||||
}, 250, function() {
|
||||
$this.unbind('mousemove');
|
||||
});
|
||||
timeout = 0;
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
$this.unbind('mouseenter').unbind('mousemove').unbind('mouseleave');
|
||||
$($this.children()[0]).stop().animate({
|
||||
width: '576px',
|
||||
height: '360px',
|
||||
marginLeft: 0,
|
||||
marginTop: 0
|
||||
}, 250, function() {
|
||||
$this.removeClass('zoom');
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
.append($('<br>'))
|
||||
.append($('<br>'))
|
||||
|
|
@ -93,7 +188,7 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
})
|
||||
: page
|
||||
);
|
||||
$text.addClass(page).empty().append(text);
|
||||
$text.empty().append(text);
|
||||
if (page == 'tour') {
|
||||
$prevButton
|
||||
.click(function() {
|
||||
|
|
@ -136,6 +231,13 @@ Ox.getJSON('json/pandora.json', function(pandora) {
|
|||
});
|
||||
$img.css({opacity: 0.25});
|
||||
$p.css({opacity: 0.25});
|
||||
}
|
||||
|
||||
function zoomIn($element, event) {
|
||||
|
||||
}
|
||||
|
||||
function zoomOut($element, e) {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue