jquery实时缩略图加载显示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery实时缩略图加载显示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实时缩略图加载显示</title>
<link rel="stylesheet" href="style/demo.css" type="text/css"/>
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function(){
				
				/* Define variable for paused element that shows when box element is being mouse over and for looping variable */
				loop				= 1;
				pausedLayer	= '<div class="paused">&nbsp;</div>';
				
				/* Create function for showing images */
				showImages		= function() { 
					
					/* Define variable for image element and append its to box (with class .list-popular) */	
					var image	= '<img src="images/sample'+loop+'.jpg" href="#" />';
					$('.list-popular').prepend(image);
					
					
					/* Increment loop value and if its more than or equal with 8 we redefine the value to 1 */
					loop++;
						
					if(loop >= 8)
						loop = 1;
					
					/* If each images on box were moused over we add class img-hover and if moused out we remove its class */
					$('.list-popular img').hover(function() {
						$(this).addClass('img-hover');
					}, function() {
						$(this).removeClass('img-hover');
					});
						
				}
				
				/* Define function for mouse over */
				mouseOver		= function() {
					
					/* Add pausedLayer to box element, add class img-opacity on each images and then stop appending image */
					$(this).prepend(pausedLayer);
					$(this).children('img').addClass('img-opacity');
					clearInterval(rollImage);
					
					/* Unfortunately if we turn down the images opacity the images will overflow the box, so we must round again their corner */
					$('.list-popular img:nth(0)').addClass('img-round-topleft');
					$('.list-popular img:nth(4)').addClass('img-round-topright');
					$('.list-popular img:nth(15)').addClass('img-round-bottomleft');
					$('.list-popular img:nth(19)').addClass('img-round-bottomright');
				}
				
				/* Define function for mouse out */
				mouseOut			= function() {
					
					/* Remove paused layer, turn up opacity for each images and then start appending image */
					$('div.paused').remove();
					$(this).children('img').removeClass('img-opacity');
					rollImage = setInterval(showImages, 1000);
					
					/* Remove rounded corner for each images */
					$('.list-popular img').removeClass('img-round-topleft')
												 .removeClass('img-round-topright')
												 .removeClass('img-round-bottomleft')
												 .removeClass('img-round-bottomtright');
				}
				
				/* Fire up the showImages function for showing Images with distance time = 1000 millisecond */
				rollImage = setInterval(showImages, 1000);
				
				/* Finally inject div list-popular with function mouseOver and mouseOut */
				$('.list-popular').hover(mouseOver, mouseOut);
				
				
			});

		</script>
	</head>
	<body>
		<p class="title">Webstuffshare</p>
		<div class="list-popular">
		</div>
</body>
</html>

CSS代码(demo.css):

body{background:#498ba0;text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.2em;margin:0;margin-top:5%;}
p.title{font-size:30px;margin-bottom:1em;font-weight:bold;color:#08323f;text-shadow:0px 1px 0px #e0e0e0;}
div.list-popular{display:block;min-width:575px;max-width:575px;min-height:440px;max-height:440px;background:#07232c url('../images/background.png') center center no-repeat;margin-left:auto;margin-right:auto;-webkit-border-radius:10px;-moz-border-radius:10px;text-align:left;overflow:hidden;z-index:1;}
div.list-popular img{margin:0;padding:0;}
.paused{margin-left:12%;margin-top:25%;position:absolute;z-index:100;width:256px;height:98px;background:url('../images/paused.png') top left no-repeat;opacity:.90;}
.img-opacity{opacity:.65;}
.img-round-topleft{-webkit-border-top-left-radius:10px;-moz-border-radius-topleft:10px;}
.img-round-bottomleft{-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomleft:10px;}
.img-round-topright{-webkit-border-top-right-radius:10px;-moz-border-radius-topright:10px;}
.img-round-bottomright{-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomright:10px;}
.img-hover{opacity:1;cursor:pointer;}
a,a:visited{color:#000;font-weight:bold;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)