このウェブサイトのようなナビゲーションを実現するためのプラグインなどがあるかどうかは誰にもわかりません: http://discover.store.sony.com/tablet/#entertainment
画面の上部または下部にカーソルを合わせると表示される上下の矢印について話しています。
このウェブサイトのようなナビゲーションを実現するためのプラグインなどがあるかどうかは誰にもわかりません: http://discover.store.sony.com/tablet/#entertainment
画面の上部または下部にカーソルを合わせると表示される上下の矢印について話しています。
理論的には、これを自分で書くのはそれほど難しいことではありません。ページの特定の部分にカーソルを合わせたときに矢印を表示するための開始点を次に示します。ユーザーが現在見ているセクションに応じて、特定のリンクを矢印に添付するだけで済みます。
詳細については、コメントを参照してください。
私が使用した Fiddle では、現在のマウス位置を取得するために and を使用することに注意してくださいevent.pageX
。event.pageY
ただし、実際には and を使用する必要がevent.screenX
ありevent.screenY
ます。フィドルのデモは小さなウィンドウとして実際のページに埋め込まれているため、後者を使用しても機能しません。
// Define how wide the areas should be
// where the arrow appears
var top_nav_height = 70;
var bottom_nav_height = 70;
// Get some dimensions
var page_height = $(document).height();
var half_arrow_size = $('.uparrow').width() / 2;
// Listen to the user moving their mouse
$(document).mousemove(function(event) {
// Where is the mouse?
var pos_y = event.screenY; // Distance from top of the page
var pos_x = event.screenX; // Distance from left of the page
var in_area;
// Leave a 5px space to hide the arrows when
// the pointer moves outside of the page
if (pos_y <= top_nav_height
&& pos_y > 5) {
in_area = 'top_nav';
}
else if (page_height - pos_y <= bottom_nav_height
&& page_height - pos_y > 5) {
in_area = 'bottom_nav';
}
// Show the arrow when in a nav area
switch(in_area) {
// We are in the top nav area
case 'top_nav':
// Show the .uparrow and have it follow the mouse
$('.uparrow')
.show()
.css({
top: pos_y - half_arrow_size,
left: pos_x - half_arrow_size
});
break;
// We are in the bottom nav area
case 'bottom_nav':
// Show the .bottomarrow and have it follow the mouse
$('.bottomarrow')
.show()
.css({
top: pos_y - half_arrow_size,
left: pos_x - half_arrow_size
});
break;
// We aren't in a nav area
default:
// Hide both arrows
$('.uparrow, .bottomarrow').hide();
}
// Decide where the arrow should link
});
リンクを処理するために、ページの各セクションに個別の矢印のセットを配置することもできると思います。そのため、リンク先のターゲットはほぼハードコーディングできます。