分页显示的明星专栏jquery特效

，表面上看他用了很多张图片，实际上就用了2张，主要用样式来控件图片显示的位置background-position，这样的做法是现在前端设计这块的最常用的，好处就是减少对服务器的请求次数，提高性能，还有就是时间长了，大图找不到了。

分类：html/css > 分页难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script type="text/javascript" src="js/jquery.min.js"></script>

核心代码

$('#star dl dt').each(function(i){
		$(this).css('background','url(images/starimg.jpg) 0 ' + i * -61 +'px no-repeat').parent().attr('i',i);
	});

	var starHoverT;
	$('#star').delegate('dl','mouseenter',function(){
		clearTimeout(starHoverT);
		var n = $('#star dl:visible').index($(this)),h = $(this).attr('h'),i=$(this).attr('i');
		starHoverT = setTimeout(function(){
			if($('#starHover').css('width') != '0px'){
				var curY = $('#starHover').css('top').replace('px','');
				var oneY = curY > n * 87 ? 24 : 10,
				twoY = oneY == 10 ? 24 : 10;
				$('#starHover').stop().animate({'top':n * 87 - oneY},100).animate({'top':n * 87 - twoY},100).animate({'top':n * 87 - 18},50);
			}else{
				$('#starHover').css({'top':n * 87 - 18}).html('<b></b>');
				$('#starHover').animate({'width':226},200);
			}
			$('#starHover b').css('margin-top',i * -127).parent().attr('href',h);
		},200);
	});