CSS3纵向的图片滚动，图文菜单代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></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 class="sc_menu_wrapper">
	<div class="sc_menu">
	    <a title="Menu" href=""><img src="//ku.shouce.ren/files/images/201601/56a32539644e8.jpg" alt="Menu"/></a>
	    <a title="Navigation" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253b5b65d.jpg" alt="Navigation"/></a>
		<a title="jQuery" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253bf41c0.jpg" alt="jQuery"/></a>		
	    <a title="CSS" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253d914ca.jpg" alt="CSS"/></a>
	    <a title="Vertical" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253e38d09.jpg" alt="Vertical"/></a>
	    <a title="Menu" href=""><img src="//ku.shouce.ren/files/images/201601/56a32539644e8.jpg" alt="Menu"/></a>
	    <a title="Navigation" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253b5b65d.jpg" alt="Navigation"/></a>
		<a title="jQuery" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253bf41c0.jpg" alt="jQuery"/></a>
	    <a title="Navigation" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253d914ca.jpg" alt="Navigation" /></a>
		<a title="JavaScript" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253e38d09.jpg" alt="JavaScript"/></a>
	    <a title="Menu" href=""><img src="//ku.shouce.ren/files/images/201601/56a32539644e8.jpg" alt="Menu"/></a>
	    <a title="Navigation" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253b5b65d.jpg" alt="Navigation"/></a>
	    <a title="JavaScript" href=""><img src="//ku.shouce.ren/files/images/201601/56a3253bf41c0.jpg" alt="Javascript"/></a>		
	</div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3纵向的图片滚动，图文菜单代码

分类

CSS3

描述

CSS3图片滚动菜单，纵向垂直滚动，鼠标移到图片上之后，根据鼠标的移动图片会跟随滚动，因使用CSS3的部分属性，所以本效果需要火狐或chrome内核的浏览器才能看到真正效果，希望学习CSS3技术的朋友们喜欢。