标签：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+jQuery垂直滚动图片菜单</title>
<style type="text/css">
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;
}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type= "text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $(‘<div class="loading">Loading...</div>‘).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 = $(‘<div class="sc_menu_tooltip"></div>‘)
.css(‘opacity‘, 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find(‘a‘).each(function(){
$(this).data(‘tooltipText‘, this.title);
});
// Remove default tooltip
scrollable.find(‘a‘).removeAttr(‘title‘);
// Remove default tooltip in IE
scrollable.find(‘img‘).removeAttr(‘alt‘);
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == ‘IMG‘){
// We‘ve attached data to a link, not image
var newText = $(lastTarget).parent().data(‘tooltipText‘);
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css(‘opacity‘, 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css(‘opacity‘, 0).text(‘‘);
});
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>
</head>
<body>
<div>http://www.999jiujiu.com/</div>
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Menu" href=""><img src="wall_s1.jpg" alt="Menu"/></a>
<a title="Navigation" href=""><img src="wall_s2.jpg" alt="Navigation"/></a>
<a title="jQuery" href=""><img src="wall_s3.jpg" alt="jQuery"/></a>
<a title="CSS" href=""><img src="wall_s4.jpg" alt="CSS"/></a>
<a title="Vertical" href=""><img src="wall_s5.jpg" alt="Vertical"/></a>
<a title="Menu" href=""><img src="wall_s1.jpg" alt="Menu"/></a>
<a title="Navigation" href=""><img src="wall_s2.jpg" alt="Navigation"/></a>
<a title="jQuery" href=""><img src="wall_s3.jpg" alt="jQuery"/></a>
<a title="Navigation" href=""><img src="wall_s4.jpg" alt="Navigation" /></a>
<a title="JavaScript" href=""><img src="wall_s5.jpg" alt="JavaScript"/></a>
<a title="Menu" href=""><img src="wall_s1.jpg" alt="Menu"/></a>
<a title="Navigation" href=""><img src="wall_s2.jpg" alt="Navigation"/></a>
<a title="JavaScript" href=""><img src="wall_s3.jpg" alt="Javascript"/></a>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/life6688/p/4590449.html
