html+css3+jquery发展历史时间轴特效

准备好需要用到的图片

新建html文档。

书写hmtl代码。

书写css代码。@charset 'utf-8';*{margin:0;padding:0;list-style-type:none}a,img{border:0}body{_background-image:url(about:blank);_background-attachment:fixed}body{color:#535353;font-size:12px;font-family:'arial','微软雅黑';background:#f0f1f1}.clear{clear:both;display:block;height:0;overflow:hidden}#history{width:1180px;height:450px;position:relative;margin:50px auto 0 auto}.title{height:95px;line-height:95px;text-indent:280px}.title h2{color:#7c7c7c;font-size:18px;font-weight:500}#circle{width:83px;height:83px;position:absolute;top:0;left:390px;border:6px solid rgba(0,0,0,0.15);border-radius:95px;text-indent:0;text-align:center;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-o-transition:all .3s linear;transition:all .3s linear}#circle .cmsk{height:83px;position:absolute;width:83px;top:0;left:0}#circle:hover{transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);border-color:rgba(0,0,0,0)}.clock{display:block}#circle:hover{border-color:rgba(255,255,255,0.6);background-color:#6bc30d}#circle:hover .clock{display:block}#circle:hover .circlecontent{display:none}#circle span{font-size:18px;color:#b0b0b0}#circle .clock{background:url(../images/clock.png) no-repeat 0 0;width:83px;height:83px;position:absolute;top:0;left:0;display:none;-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear;border-radius:0}#circle:hover .clock{border-radius:83px}.timeyear{color:#b0b0b0;font-size:18px;line-height:20px}.timeblock{height:28px;margin-top:22px;margin-left:5px}.timeblock span{display:block;height:24px;width:18px;background:url(../images/date.png) no-repeat 0 0;float:left}.timeblock .numf{background-position:0 -48px}.timeblock .nums{background-position:0 0}.timeblock .numt{background-position:0 -24px}.timeblock .numfo{background-position:0 -72px}#content{height:355px;width:1180px;overflow:hidden;background:url(../images/vertical.png) no-repeat 434px 2px;padding-top:10px}.list{overflow:hidden;position:relative}.list li{height:110px;vertical-align:bottom;overflow:hidden;position:relative}.liwrap{height:55px;margin-top:28px}.lileft{position:absolute;top:0;left:0;height:55px;width:400px;line-height:55px;text-align:right}.liright{position:absolute;top:0;right:0;height:55px;width:700px}.histt{height:35px;line-height:35px}.hisct{font-size:14px;color:#6e6e6e}.md{font-size:18px;color:#aeaeae}.year{font-size:12px;color:#aeaeae;margin-right:10px}.point{width:55px;height:55px;position:absolute;top:0;left:409px;background:url(../images/point.png) no-repeat 0 18px;overflow:hidden}.point b{height:16px;width:16px;background:#fff;display:block;margin:17px 0 0 19px;border-radius:18px;border:2px solid #6bc30d;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;transition:all .1s linear;position:absolute;top:0;left:0}.thiscur .point b{border:7px solid rgba(107,195,13,0.6);margin:12px 0 0 14px;border-radius:52px}.thiscur .histt a{color:#6bc30d}.histt a{font-size:24px;color:#747474;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-o-transition:all .3s linear;transition:all .3s linear}#arrow{position:fixed;top:50%;right:30px}*html #arrow{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin-top:350px}#arrow ul li{display:block;height:20px;width:20px;background:url(../images/icons.png) no-repeat 0 0;cursor:pointer;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}#arrow ul li:active{background-color:#000}#arrow ul .arrow_active{background-color:#000;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in}#arrow ul .arrowup{background-position:0 -26px;margin-bottom:10px}#arrow ul .arrowdown{background-position:0 0}

书写history.jsjs代码。(function(e){function b(a){a=a.replace(/left|top/g,'0px');a=a.replace(/right|bottom/g,'100%');a=a.replace(/([0-9\.]+)(\s|\)|$)/g,'$1px$2');a=a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(a[1],10),a[2],parseFloat(a[3],10),a[4]]}if(!document.defaultView||!document.defaultView.getComputedStyle){var f=e.curCSS;e.curCSS=function(a,c,b){'background-position'===c&&(c='backgroundPosition');if('backgroundPosition'!==c||!a.currentStyle||a.currentStyle[c]){return f.apply(this,arguments)}var g=a.style;return !b&&g&&g[c]?g[c]:f(a,'backgroundPositionX',b)+' '+f(a,'backgroundPositionY',b)}}var d=e.fn.animate;e.fn.animate=function(a){'background-position' in a&&(a.backgroundPosition=a['background-position'],delete a['background-position']);'backgroundPosition' in a&&(a.backgroundPosition='('+a.backgroundPosition);return d.apply(this,arguments)};e.fx.step.backgroundPosition=function(a){if(!a.bgPosReady){var c=e.curCSS(a.elem,'backgroundPosition');c||(c='0px 0px');c=b(c);a.start=[c[0],c[2]];c=b(a.end);a.end=[c[0],c[2]];a.unit=[c[1],c[3]];a.bgPosReady=!0}c=[];c[0]=(a.end[0]-a.start[0])*a.pos+a.start[0]+a.unit[0];c[1]=(a.end[1]-a.start[1])*a.pos+a.start[1]+a.unit[1];a.elem.style.backgroundPosition=c[0]+' '+c[1]}})(jQuery);(function(e){e.extend(e.fx.step,{backgroundPosition:function(b){function f(a){a=a.replace(/left|top/g,'0px');a=a.replace(/right|bottom/g,'100%');a=a.replace(/([0-9\.]+)(\s|\)|$)/g,'$1px$2');a=a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(a[1],10),a[2],parseFloat(a[3],10),a[4]]}if(0===b.state&&'string'==typeof b.end){var d=e.curCSS(b.elem,'backgroundPosition'),d=f(d);b.start=[d[0],d[2]];d=f(b.end);b.end=[d[0],d[2]];b.unit=[d[1],d[3]]}d=[];d[0]=(b.end[0]-b.start[0])*b.pos+b.start[0]+b.unit[0];d[1]=(b.end[1]-b.start[1])*b.pos+b.start[1]+b.unit[1];b.elem.style.backgroundPosition=d[0]+' '+d[1]}})})(jQuery);$(function(){function e(){c=$('.list li').eq(d).find('.year').html();$('.timeblock').attr('thisyear',c);var a=c.split(''),b=['numf','nums','numt','numfo'];for(i=0;4>i;i++){$('.'+b[i]+'').stop(!0,!1).animate({backgroundPosition:'0px '+-24*a[i]},{duration:200})}}$('.list .liwrap').mouseover(function(){$('.list li').removeClass('thiscur');$(this).parent().addClass('thiscur')});var b=0,f=$('.list li').length,d=0,a=!0,c;(function(){var a=$(window).height();890<=a&&(row=6);800<=a&&890>a&&(row=5);726<=a&&800>a&&(row=4);726>a&&(row=3)})();var h=f-row;$('.list').height(110*row);$('#content').height(110*row+25);$.fn.liOut=function(){$(this).find('.lileft').animate({left:'-400px'},500,'easeOutQuart');$(this).find('.liright').animate({right:'-700px'},500,'easeOutQuart')};$.fn.liIn=function(){$(this).find('.lileft').animate({left:'0px'},500,'easeOutQuart');$(this).find('.liright').animate({right:'0px'},500,'easeOutQuart')};$('.arrowdown').click(function(){a&&parseInt($('.list li:first').css('marginTop'))>-110*h&&(d++,b--,a=!1,$('.list li').eq(d-1).liOut(),$('.list li').eq(d+row-1).liIn(),$('.list li:first').animate({marginTop:110*b},600,'easeInOutQuad',function(){a=!0;$('.arrowdown').css('opacity',1);$('.arrowdown').removeClass('arrow_active')}),e())});$('.arrowup').click(function(){a&&0!=parseInt($('.list li:first').css('marginTop'))&&(b++,d--,a=!1,$('.list li').eq(d).liIn(),$('.list li').eq(d+row).liOut(),$('.list li:first').animate({marginTop:110*b},600,'easeInOutQuad',function(){a=!0;$('.arrowup').css('opacity',1);$('.arrowup').removeClass('arrow_active')}),e())});$('.list').mousewheel(function(b,c){Math.abs(c);if(a){var d=parseInt($('.list li:first').css('marginTop'));0-110*h&&($('.arrowdown').addClass('arrow_active'),$('.arrowdown').trigger('click'))}});$('.timeblock').attr('thisyear',c);$('.list li:gt('+(row-1)+')').find('.lileft').css({left:'-400px'});$('.list li:gt('+(row-1)+')').find('.liright').css({right:'-700px'})});

添加引用js

代码整体结构

查看效果

jquery.easing.js是个js包，可以网上下载。

jquery.mousewheel.js是个js包，可以网上下载。

jquery.js是个js包，可以网上下载。