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

2020-01-27 14:18:29

字体：大中小

来源：转载

供稿：网友

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

<!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 class="sc_menu_wrapper">	<div class="sc_menu">	    <a title="Menu" href=""><img src="/d/file/p/2020/01-27/bbeffbf90402da8f0890687de38b4e53.jpg" alt="Menu"/></a>	    <a title="Navigation" href=""><img src="/d/file/p/2020/01-27/05fcad9956879de383e431739e7ba6b3.jpg" alt="Navigation"/></a>		<a title="jQuery" href=""><img src="/d/file/p/2020/01-27/8b9c0bb3ec7fafb6cf55bc00d3a7eee0.jpg" alt="jQuery"/></a>			    <a title="CSS" href=""><img src="/d/file/p/2020/01-27/6e071c26e7f23ebfe2d31257f72103f9.jpg" alt="CSS"/></a>	    <a title="Vertical" href=""><img src="/d/file/p/2020/01-27/3be0ce24c88769a4ca531c2846efa07b.jpg" alt="Vertical"/></a>	    <a title="Menu" href=""><img src="/d/file/p/2020/01-27/bbeffbf90402da8f0890687de38b4e53.jpg" alt="Menu"/></a>	    <a title="Navigation" href=""><img src="/d/file/p/2020/01-27/05fcad9956879de383e431739e7ba6b3.jpg" alt="Navigation"/></a>		<a title="jQuery" href=""><img src="/d/file/p/2020/01-27/8b9c0bb3ec7fafb6cf55bc00d3a7eee0.jpg" alt="jQuery"/></a>	    <a title="Navigation" href=""><img src="/d/file/p/2020/01-27/6e071c26e7f23ebfe2d31257f72103f9.jpg" alt="Navigation" /></a>		<a title="JavaScript" href=""><img src="/d/file/p/2020/01-27/3be0ce24c88769a4ca531c2846efa07b.jpg" alt="JavaScript"/></a>	    <a title="Menu" href=""><img src="/d/file/p/2020/01-27/bbeffbf90402da8f0890687de38b4e53.jpg" alt="Menu"/></a>	    <a title="Navigation" href=""><img src="/d/file/p/2020/01-27/05fcad9956879de383e431739e7ba6b3.jpg" alt="Navigation"/></a>	    <a title="JavaScript" href=""><img src="/d/file/p/2020/01-27/8b9c0bb3ec7fafb6cf55bc00d3a7eee0.jpg" alt="Javascript"/></a>			</div></div></body></html>

上一篇：纯CSS3实现的表单输入高亮效果

下一篇：HTML5清明节柳叶飘动特效