jQuery版公司大事记时间轴特效代码

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

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

以下是 jQuery版公司大事记时间轴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link href="css/history.css" rel="stylesheet" />
</head>
<body>
<!-- 代码 开始 -->
<div class="head-warp">
  <div class="head">
        <div class="nav-box">
          <ul>
              <li class="cur" style="text-align:center; font-size:62px; font-family:'微软雅黑', '宋体';">公司大事记时间轴</li>
          </ul>
        </div>
  </div>
</div>
<div class="main">
  <div class="history">
    <div class="history-date">
      <ul>
      	<h2 class="first"><a href="#nogo">2012年</a></h2>

 
         <li class="green">
          <h3>10.08<span>2012</span></h3>
          <dl>
            <dt>发布全新的极速浏览器6.0版本
	<span>升级极速内核到21.0；全新默认界面；新增小窗口播放功能</span>
	</dt>
          </dl>
        </li>

       <li>
         <h3>07.19<span>2012</span></h3>
          <dl>
            <dt>升级极速内核到20.0
	<span>HTML5支持度全球最好，达到469分，测试页面： </span>
	</dt>
          </dl>
        </li>

         <li>
          <h3>07.02<span>2012</span></h3>
          <dl>
            <dt>升级极速内核到19.0
	<span>支持网络摄像头，浏览器可直接访问摄像头</span>
	</dt>
          </dl>
        </li>

       <li class="green">
          <h3>06.27<span>2012</span></h3>
          <dl>
            <dt>发布国内首个HTML5实验室
	<span>大力推广HTML5</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>06.15<span>2012</span></h3>
          <dl>
            <dt>新增了下载文件前扫描下载链接安全性的功能</dt>
          </dl>
        </li>
        <li>
          <h3>06.05<span>2012</span></h3>
          <dl>
            <dt>W3C联盟首席执行官访华，首站访问360公司
	</dt>
          </dl>
        </li>
        <li>
          <h3>05.12<span>2012</span></h3>
          <dl>
            <dt>360受邀出席W3C联盟成员见面会议</dt>
          </dl>
        </li>
        <li>
          <h3>05.11<span>2012</span></h3>
          <dl>
            <dt>升级极速内核到18.0
	<span>新增多用户使用浏览器的功能</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>05.03<span>2012</span></h3>
          <dl>
            <dt>360极速浏览器用户数突破5000万，活跃用户超2000万
	</dt>
          </dl>
        </li>
        <li>
          <h3>03.08<span>2012</span></h3>
          <dl>
            <dt>升级极速内核到17.0，提升浏览器速度、增强安全性
	<span>新增HTTP管线化技术，大幅提升网页加载速度</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>01.29<span>2012</span></h3>
          <dl>
            <dt>国内率先加入W3C联盟HTML工作组，参与HTML5标准制定</span>
	</dt>
          </dl>
        </li>
      </ul>
    </div>
    <div class="history-date">
      <ul>
      	<h2 class="date02"><a href="#nogo">2011年</a></h2>
        <li>
          <h3>12.12<span>2011</span></h3>
          <dl>
            <dt>升级极速内核到16.0，提升浏览器速度、增强安全性
	<span>新增对360网购保镖支持，保护网上交易安全</span>
	</dt>
          </dl>
        </li>
        <li class="green">
          <h3>11.24<span>2011</span></h3>
          <dl>
            <dt>发布国内首个双核浏览器实验室
	<span>轻松测试浏览器性能</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>11.01<span>2011</span></h3>
          <dl>
            <dt>升级极速内核到15.0
	<span>提升浏览器速度、增强安全性</span>
	</dt>
          </dl>
        </li>
         <li>
          <h3>10.27<span>2011</span></h3>
          <dl>
            <dt>作为国内唯一受邀参展的浏览器厂商，参展2011谷歌开发者日大会
	</dt>
          </dl>
        </li>
        <li>
          <h3>09.22<span>2011</span></h3>
          <dl>
            <dt>升级极速内核到14.0
	<span>加入Canvas 2D的GPU加速等特性</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>09.21<span>2011</span></h3>
          <dl>
            <dt>360极速浏览器用户量超千万，宣布与Chromium社区版本同步
	</dt>
          </dl>
        </li>
        <li>
          <h3>08.30<span>2011</span></h3>
          <dl>
            <dt>升级极速内核到13.0
	<span>新增更丰富的皮肤自定义支持</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>06.22<span>2011</span></h3>
          <dl>
            <dt>新增对crx格式的关联
	<span>双击crx文件即可安装扩展、皮肤</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>05.19<span>2011</span></h3>
          <dl>
            <dt>升级极速内核到10.0
	<span>极速浏览器与安全浏览器网络收藏夹互通</span>
	</dt>
          </dl>
        </li>
        <li>
          <h3>04.07<span>2011</span></h3>
          <dl>
            <dt>推出应用开放平台，与开发者共享用户资源
	</dt>
          </dl>
        </li>
       <li>
          <h3>03.27<span>2011</span></h3>
          <dl>
            <dt>新增360云安全网址拦截
	<span>新增IE9高速模式，支持GPU硬件加速</span>
	</dt>
          </dl>
        </li>
      </ul>
    </div>
    <div class="history-date">
      <ul>
      	<h2 class="date02"><a href="#nogo">2010年</a></h2>
        <li>
          <h3>12.13<span>2010</span></h3>
          <dl>
            <dt>升级极速内核到7.0<span>提升浏览器速度、增强安全性</span></dt>
          </dl>
        </li>
        <li>
          <h3>10.20<span>2010</span></h3>
          <dl>
            <dt>升级极速内核到6.0<span>新增360帐户，同步网络收藏夹</span></dt>
          </dl>
        </li>
        <li>
          <h3>09.15<span>2010</span></h3>
          <dl>
            <dt>首款双核安全浏览器 - 360极速浏览器发布
	<span>首个包含沙箱、系统级防注入、完整多进程隔离架构等安全机制的双核浏览器<br><br></span>
	</dt>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</div>
<script src="js/jquery.js"></script> 
<script src="js/main.js"></script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(main.js):

(function ($){
	if (!!window.ActiveXObject && !window.XMLHttpRequest && (location.href=='http://www.lanrentuku.com' || location.href=='http://www.lanrentuku.com/')) return;
	$(function (){
	nav();
	bnrSilder();
	sideSlider();
	helpToggle();
	systole();
	slideImg();
	downM();
	ExtMutual();
	slides("#slides",".slides");
	skinMutual();
	srollList("#dialog01","11");
	srollList("#dialog02","6");
	anchorLink();
	var img = document.createElement("img");
	img.onload = function(){
	window.onload = function (){
	skinShow();
}
;
}
;
}
);
	//滚动 function nav(){
	var $liCur = $(".nav-box ul li.cur"),curP = $liCur.position().left,curW = $liCur.outerWidth(true),$slider = $(".nav-line"),$targetEle = $(".nav-box ul li:not('.last') a"),$navBox = $(".nav-box");
	$slider.stop(true,true).animate({
	"left":curP,"width":curW}
);
	$targetEle.mouseenter(function (){
	var $_parent = $(this).parent(),_width = $_parent.outerWidth(true),posL = $_parent.position().left;
	$slider.stop(true,true).animate({
	"left":posL,"width":_width}
,"fast");
}
);
	$navBox.mouseleave(function (cur,wid){
	cur = curP;
	wid = curW;
	$slider.stop(true,true).animate({
	"left":cur,"width":wid}
,"fast");
}
);
}
;
	//滚动 function bnrSilder(){
	if (!$("#head").length && !$("#bnr").length){
	return;
}
(function (){
	if (navigator.userAgent.toLocaleLowerCase().indexOf('opera') >= 0) return;
	var sstag = document.createElement('script');
	sstag.type = 'text/javascript';
	sstag.async = true;
	sstag.src = 'script/SmoothScroll.js';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(sstag,s);
}
)();
	$(window).scroll(function (){
	var bTop = $(this).scrollTop();
	$('.bnr-box').css({
	'margin-top':-bTop * 0.48}
);
	$('.bnr-txt').css({
	'margin-top':-bTop * 0.68}
);
	$('.bnr-btn').css({
	'margin-top':-bTop * 0.68}
);
	$('.warper').css({
	"background-position":"50% " + bTop * 0.2 + "px"}
);
	if (bTop < 200){
	$(".txt-warp").css({
	'margin-top':-bTop * 1.5}
);
	$(".txt-nav-warp").removeAttr("style");
}
else{
	$(".txt-warp").css({
	'margin-top':-240}
);
	$(".txt-nav-warp").css({
	"position":"fixed","top":0,"left":0,"box-shadow":"0 2px 6px #eee"}
);
}
var idxs = 0;
	if (bTop >= 200 && bTop < 577){
	idxs;
}
else if (bTop >= 577 && bTop < 1072){
	idxs = 1;
}
else if (bTop >= 1072 && bTop < 1165){
	idxs = 2;
}
else if (bTop >= 1165){
	idxs = 3;
}
$('.txt-nav li a').eq(idxs).addClass('on').parent().siblings().children().removeClass ('on');
	if (bTop < 200){
	$('.txt-nav li a').removeClass('on');
}
}
);
}
;
	function sideSlider(){
	if (!$(".help-side dl").length){
	return false;
}
var $aCur = $(".help-side dl").find(".cur a"),$targetA = $(".help-side dl dd a"),$sideSilder = $(".side-slider"),curT = $aCur.position().top - 3;
	$sideSilder.stop(true,true).animate({
	"top":curT}
);
	$targetA.mouseenter(function (){
	var posT = $(this).position().top - 3;
	$sideSilder.stop(true,true).animate({
	"top":posT}
,240);
}
).parents(".help-side").mouseleave(function (_curT){
	_curT = curT $sideSilder.stop(true,true).animate({
	"top":_curT}
);
}
);
}
;
	function helpToggle(){
	if (!$(".help-cont dl dt a").length){
	return;
}
var $targetEle = $(".help-cont dl dt a");
	$targetEle.toggle(function (){
	$(this).parent().css({
	"background-position":"0 -20px"}
).siblings().slideDown();
	return false;
}
,function (){
	$(this).parent().removeAttr("style").siblings().slideUp();
	return false;
}
);
}
;
	function systole(){
	if (!$(".history").length){
	return;
}
var $warpEle = $(".history-date"),$targetA = $warpEle.find("h2 a,ul li dl dt a"),parentH,eleTop = [];
	parentH = $warpEle.parent().height();
	$warpEle.parent().css({
	"height":59}
);
	setTimeout(function (){
	$warpEle.find("ul").children(":not('h2:first')").each(function (idx){
	eleTop.push($(this).position().top);
	$(this).css({
	"margin-top":-eleTop[idx]}
).children().hide();
}
).animate({
	"margin-top":0}
,1600).children().fadeIn();
	$warpEle.parent().animate({
	"height":parentH}
,2600);
	$warpEle.find("ul").children(":not('h2:first')").addClass("bounceInDown").css({
	"-webkit-animation-duration":"2s","-webkit-animation-delay":"0","-webkit-animation-timing-function":"ease","-webkit-animation-fill-mode":"both"}
).end().children("h2").css({
	"position":"relative"}
);
}
,600);
	$targetA.click(function (){
	$(this).parent().css({
	"position":"relative"}
);
	$(this).parent().siblings().slideToggle();
	$warpEle.parent().removeAttr("style");
	return false;
}
);
}
;
}
)(jQuery);

CSS代码(history.css):

body,p,form,input,textarea,ul,li,h1,h2,h3,h4,dl,dt,dd,table,td,th{margin:0;padding:0;}
table,td,th{border-collapse:collapse;}
ul,li{list-style:none;}
h1,h2,h3,h4{font-size:100%;}
img,input,textarea{vertical-align:middle;border:0;}
a{text-decoration:none;color:#787878;outline:none;}
a:hover{text-decoration:underline;}
body{font:12px/1.5 "΢���ź�","tahoma",Verdana,Geneva,sans-serif;color:#666;position:relative;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
/*.public*/
.main{margin:0 auto;width:980px;}
a{blr:expression(this.onFocus=this.blur())}
/*��� IE*/
a{outline:none;}
/*���firefox��*/
.main{padding:45px 0;min-height:720px;}
/*history*/
.history{background:url(../images/line04.gif) repeat-y 187px 0;overflow:hidden;position:relative;}
.history-date{overflow:hidden;}
.history-date h2{background:url(../images/icon06.gif) #fff no-repeat 158px 0;height:59px;font-size:25px;font-family:΢���ź�;font-weight:normal;padding-left:45px;margin-bottom:74px;}
.history-date h2.first{position:absolute;left:0;top:0;width:935px;z-index:99;}
.history-date h2 a{color:#00bbff;display:inline-block;*display:inline;zoom:1;background:url(../images/icon08.gif) no-repeat right 50%;padding-right:17px;margin:21px 97px 0 0;}
.history-date h2 a:hover{text-decoration:none;}
.history-date h2 img{vertical-align:-5px;}
.history-date h2.date02{background:none;}
.history-date ul{}
.history-date ul li{background:url(../images/icon07.gif) no-repeat 180px 0;padding-bottom:50px;zoom:1;}
.history-date ul li.last{padding-bottom:0;}
.history-date ul li:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.history-date ul li h3{float:left;width:168px;text-align:right;padding-right:19px;color:#c3c3c3;font:normal 18px/16px Arial;}
.history-date ul li h3 span{display:block;color:#d0d0d0;font-size:12px;}
.history-date ul li dl{float:left;padding-left:41px;margin-top:-5px;font-family:΢���ź�;}
.history-date ul li dl dt{font:20px/22px ΢���ź�;color:#737373;}
.history-date ul li dl dt span{display:block;color:#787878;font-size:12px;}
.history-date ul li.green h3{color:#1db702;}
.history-date ul li.green h3 span{color:#a8dda3;}
.history-date ul li.green dl{margin-top:-8px;}
.history-date ul li.green dl dt{font-size:30px;line-height:28px;}
.history-date ul li.green dl dt a{/*background:url(../images/icon09.gif) no-repeat 0 0;width:19px;height:16px;*/
 display:inline-block;*display:inline;zoom:1;overflow:hidden;vertical-align:middle;margin-left:12px;}
.history-date ul li.green dl dd{padding-top:20px;display:none;}
.history-date ul li.green dl dd img{float:left;}
.history-date ul li.green dl dd p{overflow:hidden;zoom:1;line-height:21px;color:#787878;}
.history-date h2.first .more-history{font-size:16px;background:transparent;margin-left:30px;}
.history-date h2.first .more-history:hover{text-decoration:underline;}
*body .history-date ul li dl dt{_font-size:12px !important;_font-weight:bold;}
*body .history-date ul li dl dt span{_font-weight:normal !important;}
*body .history-date ul li.green dl dt a{_background:transparent !important;*background:transparent !important;*font-size:12px !important;_font-weight:normal !important;}

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