时间轴特效用jq是如何实现的

首先先放上效果图一张

DO(%%3C]D5WASS}9K4D}BPE.png

很多网站都有这样的效果,其实他的实现效果是这样的:

1、首先分左右两部分。

2、样式没有什么特别要注意的事项

<style>
body,ul,h1{ margin:0; padding:0; list-style:none;}
.timer{ width:1200px; margin:0 auto;}
#timer_left{ float:left;}
#timer_left li{ line-height:40px; text-align:center; width:100px; cursor:pointer;}
#timer_left li.bg{ background:#0066ff url(img/jian.png) no-repeat 90px top; color:#fff;}
#timer_right{ float:right; width:1050px;}
#timer_right h1{ font-family:Georgia, "Times New Roman", Times, serif; background:url(img/jian.png) no-repeat 0 -41px; line-height:42px; padding-left:30px;}
#timer_right ul li p{ float:left;}
#timer_right ul li p.month{ width:100px; background:url(img/jian.png) no-repeat 0 -87px; line-height:28px; padding-left:30px}
#timer_right ul li p.main{ width:920px; border-bottom:#CCC 1px solid; line-height:36px;}
</style>

3、下面是jq,这里要强调的是用到了prevAll和nextAll。意思是当你从上依次点击年份的时候,它的上一个ul就收起,当你从下开始点击年份的时候,它的下一个就收起。当然它自己要显示出来,则用到slideDown

<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('#timer_left').children('li').each(function(index, element) {
        $(this).click(function() {
            $('#timer_right').children('.year').eq(index).slideDown(500);
			$('#timer_right').children('.year').eq(index).prevAll('.year').slideUp(500);
			$('#timer_right').children('.year').eq(index).nextAll('.year').slideDown(500);
			$(this).addClass('bg');
			$(this).siblings('li').removeClass('bg');
			
        });
    });	
});
</script>

这样一个时间轴的特效就做好了。



关键词:
返回列表

相关文章

相关案例