CSS3 垂直マウス移動画像スクロール、グラフィックメニュー code_html/css_WEB-ITnose

CSS3+jQuery垂直滚动图片菜单 body { background: #0F0D0D; padding: 30px 0 0 50px; color:#FFFFFF; } div.sc_menu_wrapper { position: relative; height: 500px; width: 160px; margin-top: 30px; overflow: auto; } div.sc_menu { padding: 15px 0; } .sc_menu a { display: block; margin-bottom: 5px; width: 130px; border: 2px rgb(79, 79, 79) solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #fff; background: rgb(79, 79, 79); } .sc_menu a:hover { border-color: rgb(130, 130, 130); border-style: dotted; } .sc_menu img { display: block; border: none; } .sc_menu_wrapper .loading { position: absolute; top: 50px; left: 10px;

margin: 0 auto; padding: 10px; width: 100px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-align: center; color: #fff; border: 1px solid rgb(79, 79, 79); background: #1F1D1D; } .sc_menu_tooltip { display: block; position: absolute; padding: 6px; font-size: 12px; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid rgb(79, 79, 79); background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); } #back { margin-left: 8px; color: gray; font-size: 18px; text-decoration: none; } #back:hover { text-decoration: underline; } /* function makeScrollable(wrapper, scrollable){ // Get jQuery elements var wrapper = $(wrapper), scrollable = $(scrollable); // Hide images until they are not loaded scrollable.hide(); var loading = $(' Loading... ').appendTo(wrapper); // Set function that will check if all images are loaded var interval = setInterval(function(){ var images = scrollable.find('img'); var completed = 0; // Counts number of images that are succesfully loaded images.each(function(){ if (this.complete) completed++; });

if (completed == images.length){ clearInterval(interval); // Timeout added to fix problem with Chrome setTimeout(function(){ loading.hide(); // Remove scrollbars wrapper.css({overflow: 'hidden'}); scrollable.slideDown('slow', function(){ enable(); }); }, 1000); } }, 100);

function enable(){ // height of area at the top at bottom, that don't respond to mousemove var inactiveMargin = 99; // Cache for performance var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Using outer height to include padding too var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; // Do not cache wrapperOffset, because it can change when user resizes window // We could use onresize event, but it's just not worth doing that // var wrapperOffset = wrapper.offset();

// Create a invisible tooltip var tooltip = $(' ') .css('opacity', 0) .appendTo(wrapper);

// メニューのタイトルを保存 scrollable.find('a').each(function(){ $(this).data ('tooltipText', this.title); });

// デフォルトのツールチップを削除します scrollable.find('a').removeAttr('title'); // IE のデフォルトのツールチップを削除します scrollable.find('img').removeAttr('alt');

var lastTarget; //ユーザーがメニューの上にマウスを移動したとき Wrapper.mousemove(function(e){ // ターゲットを保存します lastTarget = e.target; var WrapperOffset = Wrapper.offset(); var tooltipLeft = e.pageX - WrapperOffset.left; // ツールチップをメニューの外に移動させないでください。 // オーバーフローが非表示に設定されているため、表示することもできません tooltipLeft = Math.min(tooltipLeft, WrapperWidth - 75); //tooltip.outerWidth()); var tooltipTop = e.pageY - WrapperOffset.top + Wrapper.scrollTop() - 40; // メニューの上部にいるときにツールチップをマウスの下に移動します if (e.pageY -wrapperOffset.top tooltipTop += 80; } tooltip.css({top:tooltipTop, left:tooltipLeft}); // スクロールメニュー var top = (e.pageY - WrapperOffset.top) * (scrollableHeight - WrapperHeight) / WrapperHeight - inactiveMargin; if (top top = 0; } Wrapper.scrollTop( top); });

// 間隔を設定すると、IE のパフォーマンスの問題を解決できます var interval = setInterval(function(){ if (!lastTarget) return; var currentText = tooltip.text(); if ( lastTarget.nodeName == 'IMG'){ // 画像ではなくリンクにデータを添付しました var newText = $(lastTarget).parent().data('tooltipText'); // ツールヒントを表示します新しいテキスト if (currentText != newText) { ツールヒント .stop(true) .css('opacity', 0) .text(newText) .animate({opacity: 1}, 1000); } } }, 200);

// メニューを離れるときにツールチップを非表示にする Wrapper.mouseleave(function(){ lastTarget = false; tooltip.stop(true).css('opacity', 0).text (''); }); } }

$(function(){ makeScrollable("div.sc_menu_wrapper", "div.sc_menu"); }); /*]]>*/ http://www.999jiijiu.com/

CSS3 垂直マウス移動画像スクロール、グラフィックメニュー code_html/css_WEB-ITnose

関連記事