以下是 jQuery发展历程横向时间轴代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery发展历程横向时间轴代码</title>
<!-- BEGIN GLOBAL STYLES -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- END GLOBAL STYLES -->
<!-- BEGIN PAGE PLUGINS -->
<!-- END PAGE PLUGINS -->
<!-- BEGIN USER STYLES -->
<link rel="stylesheet" href="css/layout.css">
<!-- END USER STYLES -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 about">
<div class="about-body">
<div class="about-title text-center">
<h1>发展历程</h1>
</div>
<div class="about-content process-content">
<div class="process-timeline draggable ui-widget-content">
<div id="draggable">
<div class="process-body">
<div class="process-row">
<div class="process-time">
<div class="time-con">
<span class="bgcolor red"></span>
<span class="year">2012</span>
<span class="pic red"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一条
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor blue"></span>
<span class="year">2012</span>
<span class="pic blue"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor red"></span>
<span class="year">2012</span>
<span class="pic red"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor orange"></span>
<span class="year">2012</span>
<span class="pic orange"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor orange"></span>
<span class="year">2012</span>
<span class="pic orange"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor orange"></span>
<span class="year">2012</span>
<span class="pic orange"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor orange"></span>
<span class="year">2012</span>
<span class="pic orange"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor orange"></span>
<span class="year">2012</span>
<span class="pic orange"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
<div class="process-row ">
<div class="process-time">
<div class="time-con">
<span class="bgcolor orange"></span>
<span class="year">2012</span>
<span class="pic orange"><i class="fa fa-map-marker"></i></span>
</div>
</div>
<div class="process-noyear">
第一年
</div>
<div class="process-content">
<h2> 筹备组成立 </h2>
<p>
筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息筹备组成立相关信息
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 鼠标点击 滚动 -->
<div class="scrollMouse text-center">
<span id="processLeft" style="display:inline-block"> < </span>
<i class="icon icon-mouse"></i>
<span id="processRight" style="display:inline-block"> > </span>
<br>
点击上面左右箭头
<br>
或点击鼠标左键不放左右拖动
<br>
或者按键盘左右方向键
<br>可浏览更多内容
</div>
</div>
</div>
</div>
</div>
</div>
<!--[if lt IE 9]>
<script src="plugins/html5shiv.min.js"></script>
<script src="plugins/respond.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="plugins/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE PLUGINS -->
<script src="plugins/jquery-ui.min.js"></script>
<!-- END PAGE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script>
$(function(){
var aboutWidth = $(".about").width();
$(".process-timeline").width(aboutWidth);
var lastRightSpeed = 40; //控制拖动到最右边点是否对准时间刻度线上
var processtimelineW = $(".process-timeline").width();
var processrowLength = $(".process-body").find('.process-row').length;
var processbodyNumber = processrowLength*200;
$(".process-body").css({"width":processbodyNumber});
if(processrowLength < 5)
{
$("#draggable").draggable('disable');
return;
}
$("#processLeft").click(function(){
var processContentW = $(".process-content").width();
var processBodyW = $(".process-body").width();
var processBodyML = parseInt($(".ui-draggable").css("left"));
if ( (Math.abs(processBodyML)+processtimelineW) >= processBodyW ) {
return;
}
$(".ui-draggable").css({"left":processBodyML-50});
});
$("#processRight").click(function(){
var processBodyML = parseInt($(".ui-draggable").css("left"));
if (processBodyML == 0) {
return;
}
$(".ui-draggable").css({"left":processBodyML+50});
});
$(document).keydown(function(event){
if (event.keyCode == 39) {
$("#processLeft").click();
}
if (event.keyCode == 37) {
$("#processRight").click();
}
});
$("#draggable").draggable({
cursor: "move",
axis: 'x',
grid: [50, 20],
stop: function(event, ui){
var FleftNumber = parseInt($("#draggable").css("left"));
if (FleftNumber > 0) {
$("#draggable").animate({"left": 0}, 500);
return;
};
var leftNumber = Math.abs(FleftNumber);
leftNumber = leftNumber + processtimelineW;
if (leftNumber > processbodyNumber)
{
leftNumber = processbodyNumber;
$("#draggable").animate({"left": -(leftNumber-processtimelineW + lastRightSpeed)}, 500);
}
}
});
})
</script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
</html>
JS代码(respond.min.js):
/*! Respond.js v1.4.2:min/max-width media query polyfill * Copyright 2013 Scott Jehl * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT * */
!function(a){
"use strict";
a.matchMedia=a.matchMedia||function(a){
var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");
return f.id="mq-test-1",f.style.cssText="position:absolute;
top:-100em",e.style.background="none",e.appendChild(f),function(a){
return f.innerHTML='­
<style media="'+a+'"> #mq-test-1{
width:42px;
}
</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{
matches:b,media:a}
}
}
(a.document)}
(this),function(a){
"use strict";
function b(){
u(!0)}
var c={
}
;
a.respond=c,c.update=function(){
}
;
var d=[],e=function(){
var b=!1;
try{
b=new a.XMLHttpRequest}
catch(c){
b=new a.ActiveXObject("Microsoft.XMLHTTP")}
return function(){
return b}
}
(),f=function(a,b){
var c=e();
c&&(c.open("GET",a,!0),c.onreadystatechange=function(){
4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)}
,4!==c.readyState&&c.send(null))}
;
if(c.ajax=f,c.queue=d,c.regex={
media:/@media[^\{
]+\{
([^\{
\}
]*\{
[^\}
\{
]*\}
)+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{
]+\{
(?:[^\{
\}
]*\{
[^\}
\{
]*\}
)+[^\}
]*\}
/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{
]+)\{
([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/}
,c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){
var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={
}
,p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){
var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;
return b.style.cssText="position:absolute;
font-size:1em;
width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)}
,u=function(b){
var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={
}
,o=s[s.length-1],r=(new Date).getTime();
if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;
g=r;
for(var v in l)if(l.hasOwnProperty(v)){
var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";
x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}
for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);
n.length=0;
for(var D in f)if(f.hasOwnProperty(D)){
var E=j.createElement("style"),F=f[D].join("\n");
E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}
}
,v=function(a,b,d){
var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;
b=b.substring(0,b.lastIndexOf("/"));
var g=function(a){
return a.replace(c.regex.urls,"$1"+b+"$2$3")}
,h=!f&&d;
b.length&&(b+="/"),h&&(f=1);
for(var i=0;
f>i;
i++){
var j,k,n,o;
h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;
for(var p=0;
o>p;
p++)k=n[p],l.push({
media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")}
)}
u()}
,w=function(){
if(d.length){
var b=d.shift();
f(b.href,function(c){
v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){
w()}
,0)}
)}
}
,x=function(){
for(var b=0;
b<s.length;
b++){
var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();
e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({
href:e,media:f}
)))}
w()}
;
x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}
}
(this);
CSS代码(layout.css):
/** * common*/
body{font-family:"微软雅黑","Helvetica Neue",Helvetica,Arial,sans-serif}
input,button{outline:none}
input:active,button:active{outline:none;}
::-moz-focus-inner{outline:none;}
ul,li,dl,dt,dd,ol{list-style:none;margin:0;padding:0;}
hr{border-color:#D0D0D0;}
a{outline:none;}
a:hover,a:focus{outline:none;text-decoration:none;}
.color-349aff{color:#349aff;}
.color-ffcc33{color:#ffcc33;}
.color-fe9900{color:#fe9900;}
.pr{position:relative;}
.pa{position:absolute;}
.pd-15{padding-bottom:15px;}
.pb-50{padding-bottom:50px;}
.pt-15{padding-top:15px;}
.mb-50{margin-bottom:50px;}
.about .about-body{overflow:hidden;}
.about .about-body{display:table-cell;vertical-align:top;width:10000px;overflow:hidden;}
.about .about-body .about-title h1{font-size:30px;color:#666;}
.about .about-body .about-title .help-block{color:#cbcbcb;font-size:20px;}
.about .about-body .about-content{position:relative;color:#666;line-height:180%;font-size:16px;padding-bottom:200px;}
.about .about-body .tree-bg{background:url('../img/about_tree_bg.png') no-repeat right bottom;}
.about .about-body .about-content p{color:#666;text-indent:2em;line-height:180%;font-size:16px;}
/** * 发展历程*/
.process-timeline{height:625px;width:100%;position:relative;overflow:hidden;}
.process-timeline:after{content:"";position:absolute;top:48%;left:0;margin-left:0;background:url('../img/development_timeline.png') repeat-x;height:15px;width:100%;display:block}
.process-timeline .process-body{position:relative;height:100%;margin-left:0;}
.process-timeline .process-row{cursor:move;display:inline-block;width:200px;float:left;margin:0;position:relative;height:625px;overflow:hidden;}
.process-timeline .process-row .process-time{position:absolute;top:48.7%;left:35.5%;-wekit-top:48.8%;}
.process-timeline .process-row .process-time .time-con{position:relative;text-align:center;}
.process-timeline .process-row .process-time .time-con .pic{position:absolute;z-index:1;}
.process-timeline .process-row .process-time .time-con .pic i{font-size:100px;color:#666;}
.process-timeline .process-row .process-time .time-con .year{position:absolute;z-index:10;font-size:20px;color:#fff;padding:50px 5px 0 5px;}
.process-timeline .process-row .process-time .time-con .bgcolor{position:absolute;border-radius:100%;margin-top:48px;margin-left:10px;width:40px;height:40px;z-index:5;}
.process-timeline .process-row .process-time .time-con .bgcolor.red{background:red;}
.process-timeline .process-row .process-time .time-con .bgcolor.blue{background:#3399fe;}
.process-timeline .process-row .process-time .time-con .bgcolor.orange{background:#ff9900;}
.process-timeline .process-row .process-time .time-con .red i{color:red;}
.process-timeline .process-row .process-time .time-con .blue i{color:#3399fe;}
.process-timeline .process-row .process-time .time-con .orange i{color:#ff9900;}
.process-timeline .process-row .process-noyear{position:absolute;top:43%;width:200px;text-align:center;font-size:20px;}
.process-timeline .process-row .process-content{padding-bottom:40px;}
.process-timeline .process-row .process-content h2{font-size:16px;text-align:center;}
.process-timeline .process-row .process-content p{text-indent:0 !important;font-size:14px !important;height:180px;overflow:hidden;color:#888;white-space:normal;}
.process-timeline .process-row:nth-child(even) .process-time{top:33.7%;}
.process-timeline .process-row:nth-child(even) .process-time .time-con .year{padding:15px 0 0 5px;}
.process-timeline .process-row:nth-child(even) .process-noyear{top:53%}
.process-timeline .process-row:nth-child(even) .process-content{padding-top:380px;padding-bottom:0;}
.process-timeline .process-row:nth-child(odd) .process-time .time-con .pic i{-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV();/*垂直翻转*/
}
.process-timeline .process-row:nth-child(even) .process-time .time-con .bgcolor{margin-top:15px;margin-left:10px;}
.scrollMouse i{color:#b5b5b5;display:inline-block;margin:0 5px;vertical-align:middle;}
.scrollMouse #processLeft,.scrollMouse #processRight{cursor:pointer;}
.scrollMouse i:hover{color:#666;}
分享到QQ
分享到微博
微信扫一扫
