CSS3+jQuery垂直滚动图片菜单<br>body {<br> background: #0F0D0D;<br> padding: 30px 0 0 50px; color:#FFFFFF;<br>}<br>div.sc_menu_wrapper {<br> position: relative; <br> height: 500px;<br> width: 160px;<br> margin-top: 30px;<br> overflow: auto;<br>}<br>div.sc_menu {<br> padding: 15px 0;<br>}<br>.sc_menu a {<br> display: block;<br> margin-bottom: 5px;<br> width: 130px;<br> border: 2px rgb(79, 79, 79) solid;<br> -webkit-border-radius: 4px;<br> -moz-border-radius: 4px; <br> color: #fff;<br> background: rgb(79, 79, 79); <br>}<br>.sc_menu a:hover {<br> border-color: rgb(130, 130, 130);<br> border-style: dotted;<br>}<br>.sc_menu img {<br> display: block;<br> border: none;<br>}<br>.sc_menu_wrapper .loading {<br> position: absolute;<br> top: 50px;<br> left: 10px;<br> <br> margin: 0 auto;<br> padding: 10px;<br> width: 100px;<br> -webkit-border-radius: 4px;<br> -moz-border-radius: 4px;<br> text-align: center;<br> color: #fff;<br> border: 1px solid rgb(79, 79, 79);<br> background: #1F1D1D;<br>}<br>.sc_menu_tooltip {<br> display: block;<br> position: absolute;<br> padding: 6px;<br> font-size: 12px; <br> color: #fff;<br> -webkit-border-radius: 4px;<br> -moz-border-radius: 4px;<br> border: 1px solid rgb(79, 79, 79);<br> background: rgb(0, 0, 0); <br> background: rgba(0, 0, 0, 0.5);<br>}<br>#back {<br> margin-left: 8px;<br> color: gray;<br> font-size: 18px;<br> text-decoration: none;<br>}<br>#back:hover {<br> text-decoration: underline;<br>}<br>/*<![CDATA[*/<br />function makeScrollable(wrapper, scrollable){<br /> // Get jQuery elements<br /> var wrapper = $(wrapper), scrollable = $(scrollable);<br /> // Hide images until they are not loaded<br /> scrollable.hide();<br /> var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);<br> // Set function that will check if all images are loaded<br> var interval = setInterval(function(){<br> var images = scrollable.find('img');<br> var completed = 0;<br> // Counts number of images that are succesfully loaded<br> images.each(function(){<br> if (this.complete) completed++; <br> });<br> <br> if (completed == images.length){<br> clearInterval(interval);<br> // Timeout added to fix problem with Chrome<br> setTimeout(function(){<br> loading.hide();<br> // Remove scrollbars <br> wrapper.css({overflow: 'hidden'}); scrollable.slideDown('slow', function(){<br> enable(); <br> }); <br> }, 1000); <br> }<br> }, 100);<br> <br> function enable(){<br> // height of area at the top at bottom, that don't respond to mousemove<br> var inactiveMargin = 99; <br> // Cache for performance<br> var wrapperWidth = wrapper.width();<br> var wrapperHeight = wrapper.height();<br> // Using outer height to include padding too<br> var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;<br> // Do not cache wrapperOffset, because it can change when user resizes window<br> // We could use onresize event, but it's just not worth doing that <br> // var wrapperOffset = wrapper.offset();<br> <br> // Create a invisible tooltip<br> var tooltip = $('<div class="sc_menu_tooltip"></div>')<br> .css('opacity', 0)<br> .appendTo(wrapper);<br> <br> // メニューのタイトルを保存<br>scrollable.find('a').each(function(){ <br> $(this).data ('tooltipText', this.title); <br> });<br> <br> // デフォルトのツールチップを削除します<br>scrollable.find('a').removeAttr('title'); <br> // IE のデフォルトのツールチップを削除します<br>scrollable.find('img').removeAttr('alt'); <br> <br> var lastTarget;<br> //ユーザーがメニューの上にマウスを移動したとき <br> Wrapper.mousemove(function(e){<br> // ターゲットを保存します<br> lastTarget = e.target;<br> var WrapperOffset = Wrapper.offset();<br> var tooltipLeft = e.pageX - WrapperOffset.left;<br> // ツールチップをメニューの外に移動させないでください。<br> // オーバーフローが非表示に設定されているため、表示することもできません <br> tooltipLeft = Math.min(tooltipLeft, WrapperWidth - 75); //tooltip.outerWidth());<br> var tooltipTop = e.pageY - WrapperOffset.top + Wrapper.scrollTop() - 40;<br> // メニューの上部にいるときにツールチップをマウスの下に移動します<br> if (e.pageY -wrapperOffset.top <wrapperHeight/2){<br />tooltipTop += 80;<br /> } <br />tooltip.css({top:tooltipTop, left:tooltipLeft}); <br /> // スクロールメニュー<br /> var top = (e.pageY - WrapperOffset.top) * (scrollableHeight - WrapperHeight) / WrapperHeight - inactiveMargin;<br /> if (top < 0){<br /> top = 0;<br /> } <br /> Wrapper.scrollTop( top);<br /> });<br /> <br /> // 間隔を設定すると、IE のパフォーマンスの問題を解決できます<br /> var interval = setInterval(function(){<br /> if (!lastTarget) return;<br /> var currentText = tooltip.text();<br /> if ( lastTarget.nodeName == 'IMG'){ <br /> // 画像ではなくリンクにデータを添付しました<br /> var newText = $(lastTarget).parent().data('tooltipText');<br /> // ツールヒントを表示します新しいテキスト<br /> if (currentText != newText) {<br /> ツールヒント<br /> .stop(true)<br /> .css('opacity', 0) <br /> .text(newText)<br /> .animate({opacity: 1}, 1000);<br /> } <br /> }<br /> }, 200);<br /> <br /> // メニューを離れるときにツールチップを非表示にする<br /> Wrapper.mouseleave(function(){<br /> lastTarget = false;<br /> tooltip.stop(true).css('opacity', 0).text ('');<br /> }); <br /> }<br />}<br /> <br />$(function(){ <br /> makeScrollable("div.sc_menu_wrapper", "div.sc_menu");<br />});<br />/*]]>*/http://www.999jiijiu.com/ < ;/a>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
