zm/journal_com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

begin

Browse Source
This commit is contained in:
wangjinlei
2023-05-18 09:42:12 +08:00
commit 6e7ee3dd44
1214 changed files with 103535 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

380
js/line-switch/css/reset.css Normal file
View File

@@ -0,0 +1,380 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
/* HTML5 display-role reset for older browsers */
/* --------------------------------
Primary style
-------------------------------- */
/* --------------------------------
Main Components
-------------------------------- */
.cd-horizontal-timeline {
opacity: 0;
margin: 1em auto 0 auto;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
font-size: 62.5%;
}
.cd-horizontal-timeline::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'mobile';
display: none;
}
.cd-horizontal-timeline.loaded {
/* show the timeline after events position has been set (using JavaScript) */
opacity: 1;
border-top: 1px solid #dddddd;
margin: 8px 16px;
padding-bottom: 10px;
}
.cd-horizontal-timeline .timeline {
position: relative;
height: 100px;
width: 95%;
max-width: 800px;
margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
position: relative;
height: 100%;
margin: 0 40px;
overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
/* these are used to create a shadow effect at the sides of the timeline */
content: '';
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 20px;
}
.cd-horizontal-timeline .events {
/* this is the grey line/timeline */
position: absolute;
z-index: 1;
left: 0;
top: 49px;
height: 4px;
/* width will be set using JavaScript */
/*background: #dfdfdf;*/
background: linear-gradient(to right, #0a78af 21%, #089de7 21%, #0a9ee8 57.5%,#98d4f2 57.5%);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
/* this is used to create the green line filling the timeline */
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
/*background-color: #205285;*/
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
position: absolute;
bottom: 0;
z-index: 2;
text-align: center;
font-size: 14px;
padding-bottom: 15px;
color: #383838;
/* fix bug on Safari - text flickering while timeline translates */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-horizontal-timeline .events ol li:nth-child(even) a {
bottom: -51px;
/*padding-bottom: 15px;*/
}
.cd-horizontal-timeline .events a::after {
/* this is used to create the event spot */
content: '';
position: absolute;
left: 0;
right: auto;
top: 25px;
/*-webkit-transform: translateX(-50%);*/
/*-moz-transform: translateX(-50%);*/
/*-ms-transform: translateX(-50%);*/
/*-o-transform: translateX(-50%);*/
/*transform: translateX(-50%);*/
bottom: -5px;
height: 12px;
width: 12px;
border-radius: 50%;
border: 2px solid #dfdfdf;
background-color: #f8f8f8;
-webkit-transition: background-color 0.3s, border-color 0.3s;
-moz-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
.cd-horizontal-timeline .events ol li:nth-child(even) a::after {
top: -26px;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
background-color: #006699;
border-color: #036190;
}
.cd-horizontal-timeline .events a.selected {
pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
background-color: #006699;
border-color: #036190;
}
.cd-horizontal-timeline .events a.older-event::after {
/*border-color: #205285;*/
}
.cd-timeline-navigation a {
/* these are the left/right arrows to navigate the timeline */
position: absolute;
z-index: 1;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 34px;
width: 34px;
border-radius: 50%;
border: 2px solid #dfdfdf;
/* replace text with an icon */
overflow: hidden;
color: transparent;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
/* arrow icon */
content: '';
position: absolute;
height: 16px;
width: 16px;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../img/cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
left: 0;
-webkit-transform: translateY(-50%) rotate(180deg);
-moz-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
-o-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
border-color: #205285;
}
.cd-timeline-navigation a.inactive {
cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
border-color: #dfdfdf;
}
.cd-horizontal-timeline .events-content {
position: relative;
width: 100%;
margin: 0 0 20px 0;
overflow: hidden;
-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;
transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
padding: 0 5%;
opacity: 0;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
/* visible event content */
position: relative;
z-index: 2;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
-webkit-animation-name: cd-enter-right;
-moz-animation-name: cd-enter-right;
animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
-webkit-animation-name: cd-enter-left;
-moz-animation-name: cd-enter-left;
animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
max-width: 800px;
margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 a{
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.cd-horizontal-timeline .events-content h2 a:hover {
color: #024393;
TEXT-DECORATION: underline;
}
.cd-horizontal-timeline .events-content h2 a i{
font-weight: 700;
}
.cd-horizontal-timeline .events-content p {
font-size: 14px;
color: #959595;
}
.cd-horizontal-timeline .events-content p {
line-height: 1.6;
}
@-webkit-keyframes cd-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-right {
0% {
opacity: 0;
-moz-transform: translateX(100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-left {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}

1
js/line-switch/img/cd-arrow.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="32px" viewBox="0 0 16 32"><g transform="translate(0, 0)"><polygon fill="#7b9d6f" points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "/></g><g transform="translate(0, 16)"><polygon fill="#dfdfdf" points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

177
js/line-switch/index.html Normal file
View File

@@ -0,0 +1,177 @@
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery水平时间轴内容切换插件DEMO演示</title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<section class="cd-horizontal-timeline">
<div class="timeline">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2014">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2014">20 May</a></li>
<li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2015">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2015">3 Mar</a></li>
</ol>
<span class="filling-line" aria-hidden="true"></span>
</div> <!-- .events -->
</div> <!-- .events-wrapper -->
<ul class="cd-timeline-navigation">
<li><a href="#0" class="prev inactive">Prev</a></li>
<li><a href="#0" class="next">Next</a></li>
</ul> <!-- .cd-timeline-navigation -->
</div> <!-- .timeline -->
<div class="events-content">
<ol>
<li class="selected" data-date="16/01/2014">
<h2>Horizontal Timeline</h2>
<em>January 16th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="28/02/2014">
<h2>Event title here</h2>
<em>February 28th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="20/04/2014">
<h2>Event title here</h2>
<em>March 20th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="20/05/2014">
<h2>Event title here</h2>
<em>May 20th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="09/07/2014">
<h2>Event title here</h2>
<em>July 9th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="30/08/2014">
<h2>Event title here</h2>
<em>August 30th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="15/09/2014">
<h2>Event title here</h2>
<em>September 15th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="01/11/2014">
<h2>Event title here</h2>
<em>November 1st, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="10/12/2014">
<h2>Event title here</h2>
<em>December 10th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="19/01/2015">
<h2>Event title here</h2>
<em>January 19th, 2015</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="03/03/2015">
<h2>Event title here</h2>
<em>March 3rd, 2015</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
</ol>
</div> <!-- .events-content -->
</section>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

5
js/line-switch/js/jquery-2.1.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

281
js/line-switch/js/jquery.mobile.custom.min.js vendored Normal file
View File

@@ -0,0 +1,281 @@
/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */
(function (e, t, n) {
typeof define == "function" && define.amd ? define(["jquery"], function (r) {
return n(r, e, t), r.mobile
}) : n(e.jQuery, e, t)
})(this, document, function (e, t, n, r) {
(function (e, t, n, r) {
function T(e) {
while (e && typeof e.originalEvent != "undefined") e = e.originalEvent;
return e
}
function N(t, n) {
var i = t.type, s, o, a, l, c, h, p, d, v;
t = e.Event(t), t.type = n, s = t.originalEvent, o = e.event.props, i.search(/^(mouse|click)/) > -1 && (o = f);
if (s) for (p = o.length, l; p;) l = o[--p], t[l] = s[l];
i.search(/mouse(down|up)|click/) > -1 && !t.which && (t.which = 1);
if (i.search(/^touch/) !== -1) {
a = T(s), i = a.touches, c = a.changedTouches, h = i && i.length ? i[0] : c && c.length ? c[0] : r;
if (h) for (d = 0, v = u.length; d < v; d++) l = u[d], t[l] = h[l]
}
return t
}
function C(t) {
var n = {}, r, s;
while (t) {
r = e.data(t, i);
for (s in r) r[s] && (n[s] = n.hasVirtualBinding = !0);
t = t.parentNode
}
return n
}
function k(t, n) {
var r;
while (t) {
r = e.data(t, i);
if (r && (!n || r[n])) return t;
t = t.parentNode
}
return null
}
function L() {
g = !1
}
function A() {
g = !0
}
function O() {
E = 0, v.length = 0, m = !1, A()
}
function M() {
L()
}
function _() {
D(), c = setTimeout(function () {
c = 0, O()
}, e.vmouse.resetTimerDuration)
}
function D() {
c && (clearTimeout(c), c = 0)
}
function P(t, n, r) {
var i;
if (r && r[t] || !r && k(n.target, t)) i = N(n, t), e(n.target).trigger(i);
return i
}
function H(t) {
var n = e.data(t.target, s), r;
!m && (!E || E !== n) && (r = P("v" + t.type, t), r && (r.isDefaultPrevented() && t.preventDefault(), r.isPropagationStopped() && t.stopPropagation(), r.isImmediatePropagationStopped() && t.stopImmediatePropagation()))
}
function B(t) {
var n = T(t).touches, r, i, o;
n && n.length === 1 && (r = t.target, i = C(r), i.hasVirtualBinding && (E = w++, e.data(r, s, E), D(), M(), d = !1, o = T(t).touches[0], h = o.pageX, p = o.pageY, P("vmouseover", t, i), P("vmousedown", t, i)))
}
function j(e) {
if (g) return;
d || P("vmousecancel", e, C(e.target)), d = !0, _()
}
function F(t) {
if (g) return;
var n = T(t).touches[0], r = d, i = e.vmouse.moveDistanceThreshold, s = C(t.target);
d = d || Math.abs(n.pageX - h) > i || Math.abs(n.pageY - p) > i, d && !r && P("vmousecancel", t, s), P("vmousemove", t, s), _()
}
function I(e) {
if (g) return;
A();
var t = C(e.target), n, r;
P("vmouseup", e, t), d || (n = P("vclick", e, t), n && n.isDefaultPrevented() && (r = T(e).changedTouches[0], v.push({
touchID: E,
x: r.clientX,
y: r.clientY
}), m = !0)), P("vmouseout", e, t), d = !1, _()
}
function q(t) {
var n = e.data(t, i), r;
if (n) for (r in n) if (n[r]) return !0;
return !1
}
function R() {
}
function U(t) {
var n = t.substr(1);
return {
setup: function () {
q(this) || e.data(this, i, {});
var r = e.data(this, i);
r[t] = !0, l[t] = (l[t] || 0) + 1, l[t] === 1 && b.bind(n, H), e(this).bind(n, R), y && (l.touchstart = (l.touchstart || 0) + 1, l.touchstart === 1 && b.bind("touchstart", B).bind("touchend", I).bind("touchmove", F).bind("scroll", j))
}, teardown: function () {
--l[t], l[t] || b.unbind(n, H), y && (--l.touchstart, l.touchstart || b.unbind("touchstart", B).unbind("touchmove", F).unbind("touchend", I).unbind("scroll", j));
var r = e(this), s = e.data(this, i);
s && (s[t] = !1), r.unbind(n, R), q(this) || r.removeData(i)
}
}
}
var i = "virtualMouseBindings", s = "virtualTouchID",
o = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),
u = "clientX clientY pageX pageY screenX screenY".split(" "),
a = e.event.mouseHooks ? e.event.mouseHooks.props : [], f = e.event.props.concat(a), l = {}, c = 0, h = 0,
p = 0, d = !1, v = [], m = !1, g = !1, y = "addEventListener" in n, b = e(n), w = 1, E = 0, S, x;
e.vmouse = {moveDistanceThreshold: 10, clickDistanceThreshold: 10, resetTimerDuration: 1500};
for (x = 0; x < o.length; x++) e.event.special[o[x]] = U(o[x]);
y && n.addEventListener("click", function (t) {
var n = v.length, r = t.target, i, o, u, a, f, l;
if (n) {
i = t.clientX, o = t.clientY, S = e.vmouse.clickDistanceThreshold, u = r;
while (u) {
for (a = 0; a < n; a++) {
f = v[a], l = 0;
if (u === r && Math.abs(f.x - i) < S && Math.abs(f.y - o) < S || e.data(u, s) === f.touchID) {
t.preventDefault(), t.stopPropagation();
return
}
}
u = u.parentNode
}
}
}, !0)
})(e, t, n), function (e) {
e.mobile = {}
}(e), function (e, t) {
var r = {touch: "ontouchend" in n};
e.mobile.support = e.mobile.support || {}, e.extend(e.support, r), e.extend(e.mobile.support, r)
}(e), function (e, t, r) {
function l(t, n, i, s) {
var o = i.type;
i.type = n, s ? e.event.trigger(i, r, t) : e.event.dispatch.call(t, i), i.type = o
}
var i = e(n), s = e.mobile.support.touch, o = "touchmove scroll", u = s ? "touchstart" : "mousedown",
a = s ? "touchend" : "mouseup", f = s ? "touchmove" : "mousemove";
e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "), function (t, n) {
e.fn[n] = function (e) {
return e ? this.bind(n, e) : this.trigger(n)
}, e.attrFn && (e.attrFn[n] = !0)
}), e.event.special.scrollstart = {
enabled: !0, setup: function () {
function s(e, n) {
r = n, l(t, r ? "scrollstart" : "scrollstop", e)
}
var t = this, n = e(t), r, i;
n.bind(o, function (t) {
if (!e.event.special.scrollstart.enabled) return;
r || s(t, !0), clearTimeout(i), i = setTimeout(function () {
s(t, !1)
}, 50)
})
}, teardown: function () {
e(this).unbind(o)
}
}, e.event.special.tap = {
tapholdThreshold: 750, emitTapOnTaphold: !0, setup: function () {
var t = this, n = e(t), r = !1;
n.bind("vmousedown", function (s) {
function a() {
clearTimeout(u)
}
function f() {
a(), n.unbind("vclick", c).unbind("vmouseup", a), i.unbind("vmousecancel", f)
}
function c(e) {
f(), !r && o === e.target ? l(t, "tap", e) : r && e.preventDefault()
}
r = !1;
if (s.which && s.which !== 1) return !1;
var o = s.target, u;
n.bind("vmouseup", a).bind("vclick", c), i.bind("vmousecancel", f), u = setTimeout(function () {
e.event.special.tap.emitTapOnTaphold || (r = !0), l(t, "taphold", e.Event("taphold", {target: o}))
}, e.event.special.tap.tapholdThreshold)
})
}, teardown: function () {
e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"), i.unbind("vmousecancel")
}
}, e.event.special.swipe = {
scrollSupressionThreshold: 30,
durationThreshold: 1e3,
horizontalDistanceThreshold: 30,
verticalDistanceThreshold: 30,
getLocation: function (e) {
var n = t.pageXOffset, r = t.pageYOffset, i = e.clientX, s = e.clientY;
if (e.pageY === 0 && Math.floor(s) > Math.floor(e.pageY) || e.pageX === 0 && Math.floor(i) > Math.floor(e.pageX)) i -= n, s -= r; else if (s < e.pageY - r || i < e.pageX - n) i = e.pageX - n, s = e.pageY - r;
return {x: i, y: s}
},
start: function (t) {
var n = t.originalEvent.touches ? t.originalEvent.touches[0] : t,
r = e.event.special.swipe.getLocation(n);
return {time: (new Date).getTime(), coords: [r.x, r.y], origin: e(t.target)}
},
stop: function (t) {
var n = t.originalEvent.touches ? t.originalEvent.touches[0] : t,
r = e.event.special.swipe.getLocation(n);
return {time: (new Date).getTime(), coords: [r.x, r.y]}
},
handleSwipe: function (t, n, r, i) {
if (n.time - t.time < e.event.special.swipe.durationThreshold && Math.abs(t.coords[0] - n.coords[0]) > e.event.special.swipe.horizontalDistanceThreshold && Math.abs(t.coords[1] - n.coords[1]) < e.event.special.swipe.verticalDistanceThreshold) {
var s = t.coords[0] > n.coords[0] ? "swipeleft" : "swiperight";
return l(r, "swipe", e.Event("swipe", {
target: i,
swipestart: t,
swipestop: n
}), !0), l(r, s, e.Event(s, {target: i, swipestart: t, swipestop: n}), !0), !0
}
return !1
},
eventInProgress: !1,
setup: function () {
var t, n = this, r = e(n), s = {};
t = e.data(this, "mobile-events"), t || (t = {length: 0}, e.data(this, "mobile-events", t)), t.length++, t.swipe = s, s.start = function (t) {
if (e.event.special.swipe.eventInProgress) return;
e.event.special.swipe.eventInProgress = !0;
var r, o = e.event.special.swipe.start(t), u = t.target, l = !1;
s.move = function (t) {
if (!o || t.isDefaultPrevented()) return;
r = e.event.special.swipe.stop(t), l || (l = e.event.special.swipe.handleSwipe(o, r, n, u), l && (e.event.special.swipe.eventInProgress = !1)), Math.abs(o.coords[0] - r.coords[0]) > e.event.special.swipe.scrollSupressionThreshold && t.preventDefault()
}, s.stop = function () {
l = !0, e.event.special.swipe.eventInProgress = !1, i.off(f, s.move), s.move = null
}, i.on(f, s.move).one(a, s.stop)
}, r.on(u, s.start)
},
teardown: function () {
var t, n;
t = e.data(this, "mobile-events"), t && (n = t.swipe, delete t.swipe, t.length--, t.length === 0 && e.removeData(this, "mobile-events")), n && (n.start && e(this).off(u, n.start), n.move && i.off(f, n.move), n.stop && i.off(a, n.stop))
}
}, e.each({
scrollstop: "scrollstart",
taphold: "tap",
swipeleft: "swipe.left",
swiperight: "swipe.right"
}, function (t, n) {
e.event.special[t] = {
setup: function () {
e(this).bind(n, e.noop)
}, teardown: function () {
e(this).unbind(n)
}
}
})
}(e, this)
});

277
js/line-switch/js/main.js Normal file
View File

@@ -0,0 +1,277 @@
function line_time(){
var timelines = $('.cd-horizontal-timeline'),
eventsMinDistance = 60;
(timelines.length > 0) && initTimeline(timelines);
function initTimeline(timelines) {
timelines.each(function(){
var timeline = $(this),
timelineComponents = {};
//cache timeline components
timelineComponents['timelineWrapper'] = timeline.find('.events-wrapper');
timelineComponents['eventsWrapper'] = timelineComponents['timelineWrapper'].children('.events');
timelineComponents['fillingLine'] = timelineComponents['eventsWrapper'].children('.filling-line');
timelineComponents['timelineEvents'] = timelineComponents['eventsWrapper'].find('a');
timelineComponents['timelineDates'] = parseDate(timelineComponents['timelineEvents']);
timelineComponents['eventsMinLapse'] = minLapse(timelineComponents['timelineDates']);
timelineComponents['timelineNavigation'] = timeline.find('.cd-timeline-navigation');
timelineComponents['eventsContent'] = timeline.children('.events-content');
//assign a left postion to the single events along the timeline
setDatePosition(timelineComponents, eventsMinDistance);
//assign a width to the timeline
var timelineTotWidth = setTimelineWidth(timelineComponents, eventsMinDistance);
//the timeline has been initialize - show it
timeline.addClass('loaded');
//detect click on the next arrow
timelineComponents['timelineNavigation'].on('click', '.next', function(event){
event.preventDefault();
updateSlide(timelineComponents, timelineTotWidth, 'next');
});
//detect click on the prev arrow
timelineComponents['timelineNavigation'].on('click', '.prev', function(event){
event.preventDefault();
updateSlide(timelineComponents, timelineTotWidth, 'prev');
});
//detect click on the a single event - show new event content
timelineComponents['eventsWrapper'].on('click', 'a', function(event){
event.preventDefault();
timelineComponents['timelineEvents'].removeClass('selected');
$(this).addClass('selected');
updateOlderEvents($(this));
updateFilling($(this), timelineComponents['fillingLine'], timelineTotWidth);
updateVisibleContent($(this), timelineComponents['eventsContent']);
});
//on swipe, show next/prev event content
timelineComponents['eventsContent'].on('swipeleft', function(){
var mq = checkMQ();
( mq == 'mobile' ) && showNewContent(timelineComponents, timelineTotWidth, 'next');
});
timelineComponents['eventsContent'].on('swiperight', function(){
var mq = checkMQ();
( mq == 'mobile' ) && showNewContent(timelineComponents, timelineTotWidth, 'prev');
});
//keyboard navigation
$(document).keyup(function(event){
if(event.which=='37' && elementInViewport(timeline.get(0)) ) {
showNewContent(timelineComponents, timelineTotWidth, 'prev');
} else if( event.which=='39' && elementInViewport(timeline.get(0))) {
showNewContent(timelineComponents, timelineTotWidth, 'next');
}
});
});
}
function updateSlide(timelineComponents, timelineTotWidth, string) {
//retrieve translateX value of timelineComponents['eventsWrapper']
var translateValue = getTranslateValue(timelineComponents['eventsWrapper']),
wrapperWidth = Number(timelineComponents['timelineWrapper'].css('width').replace('px', ''));
//translate the timeline to the left('next')/right('prev')
(string == 'next')
? translateTimeline(timelineComponents, translateValue - wrapperWidth + eventsMinDistance, wrapperWidth - timelineTotWidth)
: translateTimeline(timelineComponents, translateValue + wrapperWidth - eventsMinDistance);
}
function showNewContent(timelineComponents, timelineTotWidth, string) {
//go from one event to the next/previous one
var visibleContent = timelineComponents['eventsContent'].find('.selected'),
newContent = ( string == 'next' ) ? visibleContent.next() : visibleContent.prev();
if ( newContent.length > 0 ) { //if there's a next/prev event - show it
var selectedDate = timelineComponents['eventsWrapper'].find('.selected'),
newEvent = ( string == 'next' ) ? selectedDate.parent('li').next('li').children('a') : selectedDate.parent('li').prev('li').children('a');
updateFilling(newEvent, timelineComponents['fillingLine'], timelineTotWidth);
updateVisibleContent(newEvent, timelineComponents['eventsContent']);
newEvent.addClass('selected');
selectedDate.removeClass('selected');
updateOlderEvents(newEvent);
updateTimelinePosition(string, newEvent, timelineComponents, timelineTotWidth);
}
}
function updateTimelinePosition(string, event, timelineComponents, timelineTotWidth) {
//translate timeline to the left/right according to the position of the selected event
var eventStyle = window.getComputedStyle(event.get(0), null),
eventLeft = Number(eventStyle.getPropertyValue("left").replace('px', '')),
timelineWidth = Number(timelineComponents['timelineWrapper'].css('width').replace('px', '')),
timelineTotWidth = Number(timelineComponents['eventsWrapper'].css('width').replace('px', ''));
var timelineTranslate = getTranslateValue(timelineComponents['eventsWrapper']);
if( (string == 'next' && eventLeft > timelineWidth - timelineTranslate) || (string == 'prev' && eventLeft < - timelineTranslate) ) {
translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotWidth);
}
}
function translateTimeline(timelineComponents, value, totWidth) {
var eventsWrapper = timelineComponents['eventsWrapper'].get(0);
value = (value > 0) ? 0 : value; //only negative translate value
value = ( !(typeof totWidth === 'undefined') && value < totWidth ) ? totWidth : value; //do not translate more than timeline width
setTransformValue(eventsWrapper, 'translateX', value+'px');
//update navigation arrows visibility
(value == 0 ) ? timelineComponents['timelineNavigation'].find('.prev').addClass('inactive') : timelineComponents['timelineNavigation'].find('.prev').removeClass('inactive');
(value == totWidth ) ? timelineComponents['timelineNavigation'].find('.next').addClass('inactive') : timelineComponents['timelineNavigation'].find('.next').removeClass('inactive');
}
function updateFilling(selectedEvent, filling, totWidth) {
//change .filling-line length according to the selected event
var eventStyle = window.getComputedStyle(selectedEvent.get(0), null),
eventLeft = eventStyle.getPropertyValue("left"),
eventWidth = eventStyle.getPropertyValue("width");
eventLeft = Number(eventLeft.replace('px', '')) + Number(eventWidth.replace('px', ''))/2;
var scaleValue = eventLeft/totWidth;
setTransformValue(filling.get(0), 'scaleX', scaleValue);
}
function setDatePosition(timelineComponents, min) {
for (i = 0; i < timelineComponents['timelineDates'].length; i++) {
var distance = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i]),
distanceNorm = Math.round(distance/timelineComponents['eventsMinLapse']) + 0.5;
timelineComponents['timelineEvents'].eq(i).css('left', distanceNorm*min+'px');
}
}
function setTimelineWidth(timelineComponents, width) {
var timeSpan = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][timelineComponents['timelineDates'].length-1]),
timeSpanNorm = timeSpan/timelineComponents['eventsMinLapse'],
timeSpanNorm = Math.round(timeSpanNorm) + 4,
totalWidth = timeSpanNorm*width;
timelineComponents['eventsWrapper'].css('width', totalWidth+'px');
updateFilling(timelineComponents['timelineEvents'].eq(0), timelineComponents['fillingLine'], totalWidth);
return totalWidth;
}
function updateVisibleContent(event, eventsContent) {
var eventDate = event.data('date'),
visibleContent = eventsContent.find('.selected'),
selectedContent = eventsContent.find('[data-date="'+ eventDate +'"]'),
selectedContentHeight = selectedContent.height();
if (selectedContent.index() > visibleContent.index()) {
var classEnetering = 'selected enter-right',
classLeaving = 'leave-left';
} else {
var classEnetering = 'selected enter-left',
classLeaving = 'leave-right';
}
selectedContent.attr('class', classEnetering);
visibleContent.attr('class', classLeaving).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
visibleContent.removeClass('leave-right leave-left');
selectedContent.removeClass('enter-left enter-right');
});
eventsContent.css('height', selectedContentHeight+'px');
}
function updateOlderEvents(event) {
event.parent('li').prevAll('li').children('a').addClass('older-event').end().end().nextAll('li').children('a').removeClass('older-event');
}
function getTranslateValue(timeline) {
var timelineStyle = window.getComputedStyle(timeline.get(0), null),
timelineTranslate = timelineStyle.getPropertyValue("-webkit-transform") ||
timelineStyle.getPropertyValue("-moz-transform") ||
timelineStyle.getPropertyValue("-ms-transform") ||
timelineStyle.getPropertyValue("-o-transform") ||
timelineStyle.getPropertyValue("transform");
if( timelineTranslate.indexOf('(') >=0 ) {
var timelineTranslate = timelineTranslate.split('(')[1];
timelineTranslate = timelineTranslate.split(')')[0];
timelineTranslate = timelineTranslate.split(',');
var translateValue = timelineTranslate[4];
} else {
var translateValue = 0;
}
return Number(translateValue);
}
function setTransformValue(element, property, value) {
element.style["-webkit-transform"] = property+"("+value+")";
element.style["-moz-transform"] = property+"("+value+")";
element.style["-ms-transform"] = property+"("+value+")";
element.style["-o-transform"] = property+"("+value+")";
element.style["transform"] = property+"("+value+")";
}
//based on http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript
function parseDate(events) {
var dateArrays = [];
events.each(function(){
var dateComp = $(this).data('date').split('/'),
newDate = new Date(dateComp[2], dateComp[1]-1, dateComp[0]);
dateArrays.push(newDate);
});
return dateArrays;
}
function parseDate2(events) {
var dateArrays = [];
events.each(function(){
var singleDate = $(this),
dateComp = singleDate.data('date').split('T');
if( dateComp.length > 1 ) { //both DD/MM/YEAR and time are provided
var dayComp = dateComp[0].split('/'),
timeComp = dateComp[1].split(':');
} else if( dateComp[0].indexOf(':') >=0 ) { //only time is provide
var dayComp = ["2000", "0", "0"],
timeComp = dateComp[0].split(':');
} else { //only DD/MM/YEAR
var dayComp = dateComp[0].split('/'),
timeComp = ["0", "0"];
}
var newDate = new Date(dayComp[2], dayComp[1]-1, dayComp[0], timeComp[0], timeComp[1]);
dateArrays.push(newDate);
});
return dateArrays;
}
function daydiff(first, second) {
return Math.round((second-first));
}
function minLapse(dates) {
//determine the minimum distance among events
var dateDistances = [];
for (i = 1; i < dates.length; i++) {
var distance = daydiff(dates[i-1], dates[i]);
dateDistances.push(distance);
}
return Math.min.apply(null, dateDistances);
}
/*
How to tell if a DOM element is visible in the current viewport?
http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
*/
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
function checkMQ() {
//check if mobile or desktop device
return window.getComputedStyle(document.querySelector('.cd-horizontal-timeline'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
}
}

428
js/line-switch/js/modernizr.js Normal file
View File

@@ -0,0 +1,428 @@
/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
*/
;window.Modernizr = function (a, b, c) {
function C(a) {
j.cssText = a
}
function D(a, b) {
return C(n.join(a + ";") + (b || ""))
}
function E(a, b) {
return typeof a === b
}
function F(a, b) {
return !!~("" + a).indexOf(b)
}
function G(a, b) {
for (var d in a) {
var e = a[d];
if (!F(e, "-") && j[e] !== c) return b == "pfx" ? e : !0
}
return !1
}
function H(a, b, d) {
for (var e in a) {
var f = b[a[e]];
if (f !== c) return d === !1 ? a[e] : E(f, "function") ? f.bind(d || b) : f
}
return !1
}
function I(a, b, c) {
var d = a.charAt(0).toUpperCase() + a.slice(1), e = (a + " " + p.join(d + " ") + d).split(" ");
return E(b, "string") || E(b, "undefined") ? G(e, b) : (e = (a + " " + q.join(d + " ") + d).split(" "), H(e, b, c))
}
function J() {
e.input = function (c) {
for (var d = 0, e = c.length; d < e; d++) u[c[d]] = c[d] in k;
return u.list && (u.list = !!b.createElement("datalist") && !!a.HTMLDataListElement), u
}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")), e.inputtypes = function (a) {
for (var d = 0, e, f, h, i = a.length; d < i; d++) k.setAttribute("type", f = a[d]), e = k.type !== "text", e && (k.value = l, k.style.cssText = "position:absolute;visibility:hidden;", /^range$/.test(f) && k.style.WebkitAppearance !== c ? (g.appendChild(k), h = b.defaultView, e = h.getComputedStyle && h.getComputedStyle(k, null).WebkitAppearance !== "textfield" && k.offsetHeight !== 0, g.removeChild(k)) : /^(search|tel)$/.test(f) || (/^(url|email)$/.test(f) ? e = k.checkValidity && k.checkValidity() === !1 : e = k.value != l)), t[a[d]] = !!e;
return t
}("search tel url email datetime date month week time datetime-local number range color".split(" "))
}
var d = "2.8.3", e = {}, f = !0, g = b.documentElement, h = "modernizr", i = b.createElement(h), j = i.style,
k = b.createElement("input"), l = ":)", m = {}.toString, n = " -webkit- -moz- -o- -ms- ".split(" "),
o = "Webkit Moz O ms", p = o.split(" "), q = o.toLowerCase().split(" "),
r = {svg: "http://www.w3.org/2000/svg"}, s = {}, t = {}, u = {}, v = [], w = v.slice, x,
y = function (a, c, d, e) {
var f, i, j, k, l = b.createElement("div"), m = b.body, n = m || b.createElement("body");
if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), l.appendChild(j);
return f = ["&#173;", '<style id="s', h, '">', a, "</style>"].join(""), l.id = h, (m ? l : n).innerHTML += f, n.appendChild(l), m || (n.style.background = "", n.style.overflow = "hidden", k = g.style.overflow, g.style.overflow = "hidden", g.appendChild(n)), i = c(l, a), m ? l.parentNode.removeChild(l) : (n.parentNode.removeChild(n), g.style.overflow = k), !!i
}, z = function () {
function d(d, e) {
e = e || b.createElement(a[d] || "div"), d = "on" + d;
var f = d in e;
return f || (e.setAttribute || (e = b.createElement("div")), e.setAttribute && e.removeAttribute && (e.setAttribute(d, ""), f = E(e[d], "function"), E(e[d], "undefined") || (e[d] = c), e.removeAttribute(d))), e = null, f
}
var a = {
select: "input",
change: "input",
submit: "form",
reset: "form",
error: "img",
load: "img",
abort: "img"
};
return d
}(), A = {}.hasOwnProperty, B;
!E(A, "undefined") && !E(A.call, "undefined") ? B = function (a, b) {
return A.call(a, b)
} : B = function (a, b) {
return b in a && E(a.constructor.prototype[b], "undefined")
}, Function.prototype.bind || (Function.prototype.bind = function (b) {
var c = this;
if (typeof c != "function") throw new TypeError;
var d = w.call(arguments, 1), e = function () {
if (this instanceof e) {
var a = function () {
};
a.prototype = c.prototype;
var f = new a, g = c.apply(f, d.concat(w.call(arguments)));
return Object(g) === g ? g : f
}
return c.apply(b, d.concat(w.call(arguments)))
};
return e
}), s.flexbox = function () {
return I("flexWrap")
}, s.canvas = function () {
var a = b.createElement("canvas");
return !!a.getContext && !!a.getContext("2d")
}, s.canvastext = function () {
return !!e.canvas && !!E(b.createElement("canvas").getContext("2d").fillText, "function")
}, s.webgl = function () {
return !!a.WebGLRenderingContext
}, s.touch = function () {
var c;
return "ontouchstart" in a || a.DocumentTouch && b instanceof DocumentTouch ? c = !0 : y(["@media (", n.join("touch-enabled),("), h, ")", "{#modernizr{top:9px;position:absolute}}"].join(""), function (a) {
c = a.offsetTop === 9
}), c
}, s.geolocation = function () {
return "geolocation" in navigator
}, s.postmessage = function () {
return !!a.postMessage
}, s.websqldatabase = function () {
return !!a.openDatabase
}, s.indexedDB = function () {
return !!I("indexedDB", a)
}, s.hashchange = function () {
return z("hashchange", a) && (b.documentMode === c || b.documentMode > 7)
}, s.history = function () {
return !!a.history && !!history.pushState
}, s.draganddrop = function () {
var a = b.createElement("div");
return "draggable" in a || "ondragstart" in a && "ondrop" in a
}, s.websockets = function () {
return "WebSocket" in a || "MozWebSocket" in a
}, s.rgba = function () {
return C("background-color:rgba(150,255,150,.5)"), F(j.backgroundColor, "rgba")
}, s.hsla = function () {
return C("background-color:hsla(120,40%,100%,.5)"), F(j.backgroundColor, "rgba") || F(j.backgroundColor, "hsla")
}, s.multiplebgs = function () {
return C("background:url(https://),url(https://),red url(https://)"), /(url\s*\(.*?){3}/.test(j.background)
}, s.backgroundsize = function () {
return I("backgroundSize")
}, s.borderimage = function () {
return I("borderImage")
}, s.borderradius = function () {
return I("borderRadius")
}, s.boxshadow = function () {
return I("boxShadow")
}, s.textshadow = function () {
return b.createElement("div").style.textShadow === ""
}, s.opacity = function () {
return D("opacity:.55"), /^0.55$/.test(j.opacity)
}, s.cssanimations = function () {
return I("animationName")
}, s.csscolumns = function () {
return I("columnCount")
}, s.cssgradients = function () {
var a = "background-image:", b = "gradient(linear,left top,right bottom,from(#9f9),to(white));",
c = "linear-gradient(left top,#9f9, white);";
return C((a + "-webkit- ".split(" ").join(b + a) + n.join(c + a)).slice(0, -a.length)), F(j.backgroundImage, "gradient")
}, s.cssreflections = function () {
return I("boxReflect")
}, s.csstransforms = function () {
return !!I("transform")
}, s.csstransforms3d = function () {
var a = !!I("perspective");
return a && "webkitPerspective" in g.style && y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", function (b, c) {
a = b.offsetLeft === 9 && b.offsetHeight === 3
}), a
}, s.csstransitions = function () {
return I("transition")
}, s.fontface = function () {
var a;
return y('@font-face {font-family:"font";src:url("https://")}', function (c, d) {
var e = b.getElementById("smodernizr"), f = e.sheet || e.styleSheet,
g = f ? f.cssRules && f.cssRules[0] ? f.cssRules[0].cssText : f.cssText || "" : "";
a = /src/i.test(g) && g.indexOf(d.split(" ")[0]) === 0
}), a
}, s.generatedcontent = function () {
var a;
return y(["#", h, "{font:0/0 a}#", h, ':after{content:"', l, '";visibility:hidden;font:3px/1 a}'].join(""), function (b) {
a = b.offsetHeight >= 3
}), a
}, s.video = function () {
var a = b.createElement("video"), c = !1;
try {
if (c = !!a.canPlayType) c = new Boolean(c), c.ogg = a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/, ""), c.h264 = a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/, ""), c.webm = a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/, "")
} catch (d) {
}
return c
}, s.audio = function () {
var a = b.createElement("audio"), c = !1;
try {
if (c = !!a.canPlayType) c = new Boolean(c), c.ogg = a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ""), c.mp3 = a.canPlayType("audio/mpeg;").replace(/^no$/, ""), c.wav = a.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ""), c.m4a = (a.canPlayType("audio/x-m4a;") || a.canPlayType("audio/aac;")).replace(/^no$/, "")
} catch (d) {
}
return c
}, s.localstorage = function () {
try {
return localStorage.setItem(h, h), localStorage.removeItem(h), !0
} catch (a) {
return !1
}
}, s.sessionstorage = function () {
try {
return sessionStorage.setItem(h, h), sessionStorage.removeItem(h), !0
} catch (a) {
return !1
}
}, s.webworkers = function () {
return !!a.Worker
}, s.applicationcache = function () {
return !!a.applicationCache
}, s.svg = function () {
return !!b.createElementNS && !!b.createElementNS(r.svg, "svg").createSVGRect
}, s.inlinesvg = function () {
var a = b.createElement("div");
return a.innerHTML = "<svg/>", (a.firstChild && a.firstChild.namespaceURI) == r.svg
}, s.smil = function () {
return !!b.createElementNS && /SVGAnimate/.test(m.call(b.createElementNS(r.svg, "animate")))
}, s.svgclippaths = function () {
return !!b.createElementNS && /SVGClipPath/.test(m.call(b.createElementNS(r.svg, "clipPath")))
};
for (var K in s) B(s, K) && (x = K.toLowerCase(), e[x] = s[K](), v.push((e[x] ? "" : "no-") + x));
return e.input || J(), e.addTest = function (a, b) {
if (typeof a == "object") for (var d in a) B(a, d) && e.addTest(d, a[d]); else {
a = a.toLowerCase();
if (e[a] !== c) return e;
b = typeof b == "function" ? b() : b, typeof f != "undefined" && f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b
}
return e
}, C(""), i = k = null, function (a, b) {
function l(a, b) {
var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement;
return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild)
}
function m() {
var a = s.elements;
return typeof a == "string" ? a.split(" ") : a
}
function n(a) {
var b = j[a[h]];
return b || (b = {}, i++, a[h] = i, j[i] = b), b
}
function o(a, c, d) {
c || (c = b);
if (k) return c.createElement(a);
d || (d = n(c));
var g;
return d.cache[a] ? g = d.cache[a].cloneNode() : f.test(a) ? g = (d.cache[a] = d.createElem(a)).cloneNode() : g = d.createElem(a), g.canHaveChildren && !e.test(a) && !g.tagUrn ? d.frag.appendChild(g) : g
}
function p(a, c) {
a || (a = b);
if (k) return a.createDocumentFragment();
c = c || n(a);
var d = c.frag.cloneNode(), e = 0, f = m(), g = f.length;
for (; e < g; e++) d.createElement(f[e]);
return d
}
function q(a, b) {
b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function (c) {
return s.shivMethods ? o(c, a, b) : b.createElem(c)
}, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + m().join().replace(/[\w\-]+/g, function (a) {
return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")'
}) + ");return n}")(s, b.frag)
}
function r(a) {
a || (a = b);
var c = n(a);
return s.shivCSS && !g && !c.hasCSS && (c.hasCSS = !!l(a, "article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")), k || q(a, c), a
}
var c = "3.7.0", d = a.html5 || {}, e = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
f = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,
g, h = "_html5shiv", i = 0, j = {}, k;
(function () {
try {
var a = b.createElement("a");
a.innerHTML = "<xyz></xyz>", g = "hidden" in a, k = a.childNodes.length == 1 || function () {
b.createElement("a");
var a = b.createDocumentFragment();
return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined"
}()
} catch (c) {
g = !0, k = !0
}
})();
var s = {
elements: d.elements || "abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",
version: c,
shivCSS: d.shivCSS !== !1,
supportsUnknownElements: k,
shivMethods: d.shivMethods !== !1,
type: "default",
shivDocument: r,
createElement: o,
createDocumentFragment: p
};
a.html5 = s, r(b)
}(this, b), e._version = d, e._prefixes = n, e._domPrefixes = q, e._cssomPrefixes = p, e.hasEvent = z, e.testProp = function (a) {
return G([a])
}, e.testAllProps = I, e.testStyles = y, e.prefixed = function (a, b, c) {
return b ? I(a, b, c) : I(a, "pfx")
}, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + v.join(" ") : ""), e
}(this, this.document), function (a, b, c) {
function d(a) {
return "[object Function]" == o.call(a)
}
function e(a) {
return "string" == typeof a
}
function f() {
}
function g(a) {
return !a || "loaded" == a || "complete" == a || "uninitialized" == a
}
function h() {
var a = p.shift();
q = 1, a ? a.t ? m(function () {
("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1)
}, 0) : (a(), h()) : q = 0
}
function i(a, c, d, e, f, i, j) {
function k(b) {
if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) {
"img" != a && m(function () {
t.removeChild(l)
}, 50);
for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload()
}
}
var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = {t: d, s: c, e: f, a: i, x: j};
1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function () {
k.call(this, r)
}, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l))
}
function j(a, b, c, d, f) {
return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this
}
function k() {
var a = B;
return a.loader = {load: j, i: 0}, a
}
var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString, p = [],
q = 0, r = "MozAppearance" in l.style, s = r && !!b.createRange().compareNode, t = s ? l : n.parentNode,
l = a.opera && "[object Opera]" == o.call(a.opera), l = !!b.attachEvent && !l,
u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function (a) {
return "[object Array]" == o.call(a)
}, x = [], y = {}, z = {
timeout: function (a, b) {
return b.length && (a.timeout = b[0]), a
}
}, A, B;
B = function (a) {
function b(a) {
var a = a.split("!"), b = x.length, c = a.pop(), d = a.length, c = {url: c, origUrl: c, prefixes: a}, e, f,
g;
for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g));
for (f = 0; f < b; f++) c = x[f](c);
return c
}
function g(a, e, f, g, h) {
var i = b(a), j = i.autoCallback;
i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function () {
k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2
})))
}
function h(a, b) {
function c(a, c) {
if (a) {
if (e(a)) c || (j = function () {
var a = [].slice.call(arguments);
k.apply(this, a), l()
}), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function () {
var b = 0, c;
for (c in a) a.hasOwnProperty(c) && b++;
return b
}(), a) a.hasOwnProperty(n) && (!c && !--m && (d(j) ? j = function () {
var a = [].slice.call(arguments);
k.apply(this, a), l()
} : j[n] = function (a) {
return function () {
var b = [].slice.call(arguments);
a && a.apply(this, b), l()
}
}(k[n])), g(a[n], j, b, n, h))
} else !c && l()
}
var h = !!a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n;
c(h ? a.yep : a.nope, !!i), i && c(i)
}
var i, j, l = this.yepnope.loader;
if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l)
}, B.addPrefix = function (a, b) {
z[a] = b
}, B.addFilter = function (a) {
x.push(a)
}, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function () {
b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete"
}, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function (a, c, d, e, i, j) {
var k = b.createElement("script"), l, o, e = e || B.errorTimeout;
k.src = a;
for (o in d) k.setAttribute(o, d[o]);
c = j ? h : c || f, k.onreadystatechange = k.onload = function () {
!l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null)
}, m(function () {
l || (l = 1, c(1))
}, e), i ? k.onload() : n.parentNode.insertBefore(k, n)
}, a.yepnope.injectCss = function (a, c, d, e, g, i) {
var e = b.createElement("link"), j, c = i ? h : c || f;
e.href = a, e.rel = "stylesheet", e.type = "text/css";
for (j in d) e.setAttribute(j, d[j]);
g || (n.parentNode.insertBefore(e, n), m(c, 0))
}
}(this, document), Modernizr.load = function () {
yepnope.apply(window, [].slice.call(arguments, 0))
};

BIN
js/line-switch/sy50.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
js/line-switch/sy51.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 945 B

260
js/line-switch/time.css Normal file
View File

@@ -0,0 +1,260 @@
.about2 {
background-color: #fff;
padding: 20px 0 220px 0;
margin-bottom: 20px;
}
.wrapper {
box-sizing: border-box;
width: 96%;
margin: auto;
max-width: 1200px;
}
/*.clearfix-time {*/
/* display: block;*/
/*}*/
.about2 ul {
background: url(sy51.png) repeat-y center;
position: relative;
height: 3600px;
}
/*.clearfix-time {*/
/* display: block;*/
/* zoom: 1;*/
/*}*/
.about2 li:before {
background: url(sy50.png) no-repeat center center;
left: -54px;
top: 12px;
content: "";
display: block;
position: absolute;
width: 17px;
height: 17px;
}
/*.about2 li h4:hover{*/
/* color: #F8F8F8;*/
/* transition: all 1s;*/
/* transform: translateY(-15px);*/
/*}*/
.about2 li h3 {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.about2 li h3:hover {
color: #024393;
TEXT-DECORATION: underline;
}
.about2 li h4 {
position: relative;
display: block;
text-decoration: none;
color: #ecf0f1;
text-transform: uppercase;
padding: 4px 0;
transition: 0.5s;
}
.about2 li h4::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
top: 100%;
left: 0;
background: #3498db;
transition: transform 0.5s;
transform: scaleX(0);
transform-origin: right;
}
.about2 li h4:hover {
color: #006699;
}
/*.about2 li h4:hover::after {*/
/* transform: scaleX(1);*/
/* transform-origin: left;*/
/*}*/
.f30 {
font-size: 14px;
}
.about2 li:nth-child(2n):before {
background: url(sy50.png) no-repeat center center;
right: -46px;
top: 12px;
left: auto;
content: "";
display: block;
position: absolute;
width: 17px;
height: 17px;
}
.about2 li h4 {
color: #333;
transition: all 1s;
}
.about2 li p {
color: #959595;
margin-top: 10px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
margin-bottom: 10px;
font-size: 13px;
}
.clearfix-time:after {
content: '\20';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.about2 li:nth-child(1) {
margin-top: 0;
}
/* 表示1-3之间的间距 */
.about2 li {
/*float: right;*/
width: 45%;
/*text-align: left;*/
position: absolute;
margin-top: 10px;
margin-left: 559px;
}
.about2 li:nth-child(2n) {
/*float: left;*/
text-align: right;
margin-top: 10px;
margin-left: 14px;
}
.about3 ul {
background: url(sy51.png) repeat-y left;
background-position-x: 23px;
position: relative;
height: 1370px;
overflow: hidden;
}
/*.clearfix-time {*/
/* display: block;*/
/* zoom: 1;*/
/*}*/
.about3 li:before {
background: url(sy50.png) no-repeat center center;
left: -35px;
top: 12px;
content: "";
display: block;
position: absolute;
width: 17px;
height: 17px;
}
/*.about2 li h4:hover{*/
/* color: #F8F8F8;*/
/* transition: all 1s;*/
/* transform: translateY(-15px);*/
/*}*/
.about3 li h3 {
font-size: 12px;
line-height: 18px;
}
.about3 li h3:hover {
color: #024393;
TEXT-DECORATION: underline;
}
.about3 li h4 {
position: relative;
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 4px 0;
color: #333;
transition: all 1s;
font-size: 12px;
}
.about3 li h4::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
top: 100%;
left: 0;
background: #3498db;
transition: transform 0.5s;
transform: scaleX(0);
transform-origin: right;
}
.about3 li h4:hover {
color: #006699;
}
.about3 li p {
color: #959595;
margin-top: 10px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
margin-bottom: 10px;
font-size: 13px;
}
.clearfix-time:after {
content: '\20';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.about3 li:nth-child(1) {
margin-top: 0;
}
/* 表示1-3之间的间距 */
.about3 li {
/*float: right;*/
width: 190px;
/*text-align: left;*/
position: absolute;
margin-top: 10px;
margin-left: 50px;
}