TA的每日心情 | 擦汗 2020-6-6 16:10 |
---|
签到天数: 164 天 [LV.7]常住居民III
|
发表于 2020-2-5 08:43:53
|
显示全部楼层
代码如下: 上中下 =====分割0 N" `. G8 K8 X# C6 I: v. b
% i) D% e3 H5 W5 k- t+ M7 p" v<!-- front -->; b% o2 e& V8 [
<div id="stage-face" class="section" >* r; S9 P2 @+ y% D7 i7 h: p
<img src="_mj_friends01.jpg" width="100%" height="auto">
" H( {7 r( X8 [0 H8 |</div>
2 H; V' M2 ^+ j<div class="section">" _) v ~) N6 Y+ T
<div id="tv-src">{{Video}}</div> o; t. c& o- G* ?7 U# ^4 W: y' z
<div id="tv" class="item">7 J5 g% A# t/ Z9 f/ @
<video autoplay="true" width="100%" height="auto" src="{{Video}}" controls="controls" webkit-playsinline="true" playsinline="true" poster="_mj_friends01.jpg"></video>
" N& }5 t" F3 X" Z0 u </div> G ?3 N$ J2 H. t3 z
</div>4 Z) \! c0 m( `0 t8 N0 g( ^
% h& ?! g: p, z w+ U" q
<div class="section">' P5 p2 J7 p' B% u9 x4 T
<div id="voice" class="item">/ ]% K' l$ s0 [9 p& x
<span>播放音频:</span>: [- i* g$ s1 `0 ]+ \4 P* U
<img src="_mj_play_button.png" onClick="playAudio(1);">
1 s6 U. w1 c; y# L <img src="_mj_pause_button.png" class="mobile" onClick="playAudio(0);">4 t( ~0 a) Y1 J m6 K
<audio id="audiotag" src="{{Audio}}" style="display:none"></audio>
8 }) ]; x: q5 G: r. X/ y2 P <label class="mobile"><input id="loop" name="loop" type="checkbox" onclick="loopAudio(this);"/>循环播放</label>. @' O. k ?* i" U1 `4 w. u: ]
</div>. q$ O+ T T- Q/ r3 V
</div>3 J2 r g) z$ M4 B0 h) Q
' S$ U( P' S$ O$ [<div class="footer">
2 z. k+ `# e j1 Z <p>{{Timeline}}</p>
+ h1 I& N% q1 \) [4 r5 X( Q</div># p- ?+ M3 e: Y! s/ X% M6 a
. w- M8 c+ N: [' d; _
<script type="text/javascript">) L2 Z6 y$ \+ \0 }4 q1 d+ x1 z3 Q _
if(bWin) {playVideo();}6 l! `+ g! ?# K5 B
</script> j4 ^) Q$ F4 `' u. Z+ O
; o- }; }% g/ C1 e/ L& \4 d2 v- ^
( I% J4 C1 O8 ^, Y- B& P# @/ X, ]& W5 P$ {* P
8 t6 x' C+ x, u# z# u+ W
========================================================================================
" q! k5 q6 l5 w" E3 \1 M1 m" Y0 Q5 O) J2 D
</style>) O: D; b/ E# O) C7 N: E4 Z
<style>, I. B5 z) x. l4 y* y8 `8 b9 h8 Q
) P8 b6 j! Q+ O.card {3 T1 V' ^6 \. i" t/ h" M" r
font-family : Helvetica, Arial, Sans-serif;, H2 k/ e- W9 Y" k: h* H T
font-size : 16px;
2 s' w% j. [: t0 X text-align : left;5 w6 s; m9 |& N2 D" E4 {
color : #1d2129;
% S; O, j9 {8 w background-color : #e9ebee;; |- ^+ u/ ]1 N( ?5 j: |5 }1 A7 N
}
- {$ z( J& g( h3 k/ ^# [5 x: b" ?- k4 ^
.section {
. W# y6 A# G& K9 W border : 1px solid;
! s1 T8 J. Y6 p- o( h, C border-color : #e5e6e9 #dfe0e4 #d0d1d5; W. F& E. g- P" ]/ W% k
border-radius : 3px;
# C- T! ^, s; I4 I. { background-color : #fff;9 e6 n2 N) _; b( I
position : relative;
% j) q" |( Q/ `! ]. x margin : 5px 0;
9 {; S3 ]% Z+ f}; j# C& _$ s/ c; {
.item {margin:0 10px; padding:10px 0;}+ w5 ~' u4 g( w( b# J Z: ]
.section p {padding:0 10px}- t0 H6 W" v8 v
.center {text-align:center}
7 a: X- `+ y. D8 G9 t: i% bhr {border:0; margin:0 12px;border-top:1px solid #e5e5e5;}
/ V4 K3 C# K3 u1 f3 j#voice, #tv {9 S% x' U: p) B4 H- g
font-family : Helvetica, Arial, Sans-serif;9 l+ R3 L2 M2 _3 e$ i7 m
font-size : 16px;$ b" K8 o9 ~: l0 s) w: U, S9 {* T
text-align : left;7 d9 z$ M, F" Z; Q
color : #1d2129;0 ?& ^/ H' M Z! W' k: v- D
}3 @) Y1 x- O/ V; k. ?6 G
#voice label{display:block; float:right; padding-top:5px;}
& A1 \$ u2 \8 v3 F; D5 |$ E0 S! `#voice img, #tv img{vertical-align:middle;padding:0 5px 0 10px;}
2 w7 d; A6 K" k6 a( `0 z2 y0 d* `6 n
p {font-size:16px;line-height:1.5em;margin:0.5em 0; text-align:center;}
" |* B% F" q/ ]0 N. gray {color:#666}0 Z1 ?2 I1 r& h4 }) v
.footer {margin-top:5rem;padding-right:5px}" x1 c/ o Z+ M) q" Z7 y' `) [
.footer p {font-size: 12px; font-style: italic; color: gray;text-align:right;}
* s! L' G9 B$ S0 }# \; e m$ n#tv-src, #stage-face, #notes{display:none}
/ o& o1 f6 u0 X, r& d* F4 Z0 I0 A4 D
/ I3 K, I9 }& m1 v" ]3 J! b</style>+ ]0 a% s) U, _6 l
8 j6 ]* V) a% b. p9 _' {<script type="text/javascript"># r, J' ~7 ^# X
bWin = navigator.platform.indexOf("Win") == 0;
9 x" |; o+ y( S! e% w: Q3 f( S* }3 c; n7 \
function playVideo(){! [+ X! }1 O' R5 k/ z# t
var videoSrc = document.getElementById("tv-src").textContent;( s: X6 r& [, E ~4 [
py.link("ankiplay" + videoSrc);
: |5 H# v# O! w6 b0 Q, \7 g }
0 c/ p2 ] T' F
0 @# |, p2 w$ E M% V1 X function playAudio(bPlay){! _( h; _7 ], }0 p$ M4 h
var player = document.getElementById('audiotag');0 N1 }' D& N" n4 j) h5 {
var audioSrc = player.getAttribute("src");
( Y: h6 J8 I6 B0 _; w if (bWin) {
! ~' w, I, T* C4 f" N+ k py.link("ankiplay" + audioSrc);- ^% e5 g4 f) |% F2 i- a
} else {7 \3 \1 x* f y) f7 O
if (bPlay) player.play(); else player.pause();
) F& J% J7 d7 q" ^# R0 a }* J( L6 y7 S( R9 c* \6 Q5 p4 U
}
; f) G+ ~2 M% h4 n : b3 T: W8 t! s6 U& P6 D$ R5 L% [
function loopAudio(cb){5 p: u& ^/ H8 u
var bLoop = cb.checked;
, U. B* I5 Y4 j% }. Y! l var player = document.getElementById('audiotag');
3 ?) S( a6 v* y' ` if (bLoop)
' l' R9 g; S, M& L, Q player.setAttribute("loop", "true");7 {( \4 ?% i2 B5 w2 ~# D2 v$ u& x
else
2 J" [: _1 B/ v" @ player.removeAttribute("loop");9 E6 T: V. e! V* O( e) {( A. ~6 q
}
3 E, E5 s9 R. W7 X; F5 w / S' \ H! l$ v/ \+ z( ^% l, N. ]
function hidex(x){9 |: t" ?8 z; c+ P: h
if (x.length > 1) {0 b, d: i. O3 A" q4 O
for(var i=0; i<x.length; i++) {
. {/ \% g9 h# |& h x[i].setAttribute("style", "display:none")0 W( v1 r! \* T
}
4 r4 B, t/ x+ }! G7 L } else {" V) \4 U1 W, j. G6 I& n% b" R, A
x.setAttribute("style", "display:none")
1 R# v8 u; L# z3 f }
$ }* Y2 v9 m# W }. I! h# o! r5 G: u' ?
5 V X" {1 L/ ?0 C& z* h% o function update() {
$ w! ?6 \$ Z1 `1 V1 z6 _! y var tv = document.getElementById("tv");0 f$ j$ x3 w7 Y9 x8 p. m2 q; \
if (bWin) {
+ ?" f& Y9 \3 r" b- y4 {$ y5 P tv.innerHTML = '<span>播放视频:</span><img src="_mj_play_button.png" onClick="playVideo();">';
% \) ^& A! E* O! }. q- r& j# n 4 t1 x \3 m1 Y: v& }; g' K
var stage_face = document.getElementById("stage-face");. U5 ~$ E9 h( l
stage_face.setAttribute("style", "display:block")7 p" e* N4 `, Y( [
$ [. y5 S, h9 Q* |8 G5 X
var mobile_only = document.getElementsByClassName("mobile");2 C5 ?6 }0 W- {; L
hidex(mobile_only);
6 E6 x9 q/ P4 e5 o }: D; ]7 }5 C. A" X$ X5 T5 U
% G) {4 D9 u* a+ m var notes = document.getElementById("notes");! c S7 F# _ F' y
var child = notes.getElementsByClassName("item")
2 c# X* p3 h9 H, O- A {' Q if (notes!=null && child!=null && child[0].textContent) {& i$ k/ N# v' p6 g
notes.setAttribute("style", "display:block");
7 L& A# d2 W: n' j P1 t }: H1 |, b! @8 g( U% T1 t
}
/ n H6 U g, c ! K7 T d7 o1 V/ }6 @
window.onload = update;: ^: Z( p7 O0 L+ L: f
update();; ]4 L9 D' M/ U4 o0 J& d; l
, K, D, q$ C7 i: i7 j/ ~
</script>- ]3 [ |2 y7 o+ ]/ x$ n
4 G( O% X% `" {- C2 F& P
<style>$ w. f# `3 B& }& |
) y. S9 a, G* j, q
' |" S& j# E- r& y u5 L6 P- M
/ }2 V, g6 H3 _0 j=========================================================3 ~' P' s& k, s$ h$ Y/ k
<div id="stage-face" class="section" >
( U; l' v+ A+ ~. J <img src="_mj_friends01.jpg" width="100%" height="auto">: k: j/ Z# j' Y! b& ^& _ Z
</div>
- }% B3 H. _- ^' n) G0 X<div class="section">/ _7 S% ?& ?0 s( o3 G6 \8 e& v
<div id="tv-src">{{Video}}</div>) R! t5 u: |5 C! W0 | y( Q: P
<div id="tv" class="item">
S% `5 b' u. n+ ? <video width="100%" height="auto" src="{{Video}}" controls="controls" webkit-playsinline="true" playsinline="true" poster="_mj_friends01.jpg"></video>
: _7 I1 A) Z0 V5 j! n </div>, d2 W/ _0 o' P! @7 |
$ k. K8 j' J* U S- J2 p: X <p>{{Subtitle-EN}}</p> i) q9 k0 ?6 ^+ U4 n- O9 b7 }. U
<p class="gray">{{Subtitle-CN}}</p>/ N. {& ?, a! k+ x% \) A
</div>
: {, B, o: w- n; W5 `6 b4 [' A% O5 y* K1 O
<div class="section">
. }% P0 M- h1 \$ s1 B3 K' b <div id="voice" class="item">& s% w6 [: g q3 ^8 a9 H/ d
<span>播放音频:</span>
7 `: S* R. |5 G <img src="_mj_play_button.png" onClick="playAudio(1);">
0 z/ I3 r' ~( u <img src="_mj_pause_button.png" class="mobile" onClick="playAudio(0);">
( B$ e1 }7 |- @: u; ~4 i# w <audio id="audiotag" src="{{Audio}}" style="display:none"></audio>. E: T/ [* Y+ t6 ]0 J6 F' J
<label class="mobile"><input id="loop" name="loop" type="checkbox" onclick="loopAudio(this);"/>循环播放</label>/ d H6 W8 d" |! b/ H0 j/ ?
</div>
/ d9 }8 P6 D3 A& o' b5 U</div>
5 s! } e8 r* `% R8 j+ b
4 J4 L7 y. @+ J- D5 s0 X a<div class="section" id="notes">$ q* d3 _+ L% ~% P0 {
<div class="item">{{Notes}}</div>" f4 Z! R. U Y- G
</div> |
|