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...').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">')<br /> .css('opacity', 0)<br /> .appendTo(wrapper);<br /> <br /> // Save menu titles<br /> scrollable.find('a').each(function(){ <br /> $(this).data('tooltipText', this.title); <br /> });<br /> <br /> // Remove default tooltip<br /> scrollable.find('a').removeAttr('title'); <br /> // Remove default tooltip in IE<br /> scrollable.find('img').removeAttr('alt'); <br /> <br /> var lastTarget;<br /> //When user move mouse over menu <br /> wrapper.mousemove(function(e){<br /> // Save target<br /> lastTarget = e.target;<br /> var wrapperOffset = wrapper.offset();<br /> var tooltipLeft = e.pageX - wrapperOffset.left;<br /> // Do not let tooltip to move out of menu.<br /> // Because overflow is set to hidden, we will not be able too see it <br /> tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());<br /> var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;<br /> // Move tooltip under the mouse when we are in the higher part of the menu<br /> if (e.pageY - wrapperOffset.top < wrapperHeight/2){<br /> tooltipTop += 80;<br /> } <br /> tooltip.css({top: tooltipTop, left: tooltipLeft}); <br /> // Scroll menu<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 /> // Setting interval helps solving perfomance problems in IE<br /> var interval = setInterval(function(){<br /> if (!lastTarget) return;<br /> var currentText = tooltip.text();<br /> if (lastTarget.nodeName == 'IMG'){ <br /> // We've attached data to a link, not image<br /> var newText = $(lastTarget).parent().data('tooltipText');<br /> // Show tooltip with the new text<br /> if (currentText != newText) {<br /> tooltip<br /> .stop(true)<br /> .css('opacity', 0) <br /> .text(newText)<br /> .animate({opacity: 1}, 1000);<br /> } <br /> }<br /> }, 200);<br /> <br /> // Hide tooltip when leaving menu<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.999jiujiu.com/
