TA的每日心情 | 擦汗 2020-6-6 16:10 |
---|
签到天数: 164 天 [LV.7]常住居民III
|
发表于 2020-2-5 08:43:53
|
显示全部楼层
代码如下: 上中下 =====分割3 w3 D- R! ]2 p' a" C6 F; c/ h _
7 y7 |9 D2 m" K% T
<!-- front -->
- c' q* U- D8 `8 U" E( Z: s5 }<div id="stage-face" class="section" >
. S. w; z" K: Y7 l* k w <img src="_mj_friends01.jpg" width="100%" height="auto">
$ n+ O" P: {' T, }) J3 B* o d. T' i</div>' W4 Q& s& h$ I
<div class="section">
$ w# P1 t7 ?$ T8 | <div id="tv-src">{{Video}}</div>
' I% G1 O$ O Y; x# I5 F# N7 x <div id="tv" class="item">
7 m6 H% R5 }+ O3 b7 a <video autoplay="true" width="100%" height="auto" src="{{Video}}" controls="controls" webkit-playsinline="true" playsinline="true" poster="_mj_friends01.jpg"></video>
& c B1 ~- ~/ _& A' S e" z' ^* f T </div>3 e! L6 B2 i( V% l" {9 g: N: i" |
</div>0 f6 r& N& w: P5 G* N# z ]) v
5 K! Q1 T7 S- z. L2 B2 ]* b<div class="section"># m" J& f2 K# [! m: R1 n
<div id="voice" class="item">
, t7 y* r/ _ F" d7 G0 n <span>播放音频:</span>
' o7 ~! G' Y* {- S) f, s) r <img src="_mj_play_button.png" onClick="playAudio(1);">
1 K b4 Q8 d" V. N- C( ]0 d7 w <img src="_mj_pause_button.png" class="mobile" onClick="playAudio(0);"># Y! a+ z( O/ ?& {
<audio id="audiotag" src="{{Audio}}" style="display:none"></audio>2 V/ x6 A% c4 F
<label class="mobile"><input id="loop" name="loop" type="checkbox" onclick="loopAudio(this);"/>循环播放</label>$ E$ g' o" ?6 s: D
</div>& w3 [6 H7 D0 I; Z* U
</div>. J) x4 p9 I6 b$ |/ N: {4 h j
, w' E# r0 G; F1 s<div class="footer">, T- V1 P: i9 A3 F3 _8 ?+ `3 t% Q) e
<p>{{Timeline}}</p>9 J5 I6 O$ r) ?
</div>
, M, Z5 S3 A5 M" }: {. i4 q$ O3 e2 n" c$ R+ ^
<script type="text/javascript">5 ?) J; G6 m% d. V) h( z
if(bWin) {playVideo();}, ?' }& h8 S% v& W# j4 l
</script>: y" k' [- q# O" U
6 j' q! B' Y5 K* W; y" W5 _/ B" B# K1 K
' S0 j# G, q @# U. i) A
* U1 z* D5 @( S" M========================================================================================
! W0 ]+ H; d) a& P5 M+ D0 f- d% h) I+ O( L+ P) D& z" K
</style> N, Q8 d' _( w
<style>
" M$ T# V" I- d5 R- f2 g
3 @3 Y" { O. x4 [1 }( f) }# z.card {
+ g1 T9 G" q! g d$ n font-family : Helvetica, Arial, Sans-serif;: y3 K" n# E% z+ K! C" G2 G
font-size : 16px;
. K8 O- K3 @* o. i" A text-align : left;
2 H/ l7 G* [1 P% U$ q: B color : #1d2129;
0 J6 G7 |. T4 f& j5 S background-color : #e9ebee;
- p( Y9 {$ f2 ?% M3 @8 _}- D9 p( c' k/ k& w9 j3 T
7 i4 P6 w5 z5 x- e& a! N; i5 b, v9 g
.section {3 Y) g$ c1 V5 {" l6 \( W- g4 K
border : 1px solid;: V% i4 O: J/ r$ B L, }6 W" Q
border-color : #e5e6e9 #dfe0e4 #d0d1d5;
7 I/ V1 W: [2 C& j" y6 V border-radius : 3px; - m/ A* }: J% c4 v0 g2 Y
background-color : #fff;7 O% M& k/ ^7 ]: F' @
position : relative;) }5 O4 F5 K" \' j7 e
margin : 5px 0;
4 d$ t! V* c8 b}" E/ v: I+ c+ _/ y2 N& |/ K1 U
.item {margin:0 10px; padding:10px 0;}* j! H2 a/ j9 U! I2 M+ v6 K+ ?
.section p {padding:0 10px}1 e: e- H, ]' e1 c! Y; \+ V' x
.center {text-align:center}
- ~. Y' J, s5 ]2 {hr {border:0; margin:0 12px;border-top:1px solid #e5e5e5;}( H5 v7 Q7 e1 R; c- ^ Q% m3 |
#voice, #tv {9 C! p1 v8 x, ^/ e$ ^
font-family : Helvetica, Arial, Sans-serif;
' C/ ^( y) @# f0 G2 m* i font-size : 16px;" m0 {+ Y2 h- S& a0 O9 m1 Q! Y' w/ T
text-align : left;
9 v; z: d3 {" L( P$ D color : #1d2129;
B! H" h7 O9 R+ [}1 s! w' x1 d$ m3 ?: [1 ~
#voice label{display:block; float:right; padding-top:5px;}8 N9 l$ R4 S6 Y% O, ^! c: d
#voice img, #tv img{vertical-align:middle;padding:0 5px 0 10px;}
8 u9 B, Z/ r* m/ [3 T" t5 b$ ]3 }- D7 @/ z4 U7 f3 }% O
p {font-size:16px;line-height:1.5em;margin:0.5em 0; text-align:center;}
& A8 V" a2 E) m/ ]1 @1 F. t. gray {color:#666}
) ~4 i) y; W5 R6 C4 V: v.footer {margin-top:5rem;padding-right:5px}
( e z2 v& B! W7 w2 U.footer p {font-size: 12px; font-style: italic; color: gray;text-align:right;}
# T4 h4 D8 L6 D- ^) X/ J#tv-src, #stage-face, #notes{display:none}
# I1 C! H: a& w+ \& s. O! R& u* v, b" ~7 K' h/ P
</style>
b h* d6 X5 f( t4 C
+ e2 h( r0 z3 h/ B1 M<script type="text/javascript">7 _# @- D- x2 y5 r8 z7 d/ A
bWin = navigator.platform.indexOf("Win") == 0;
( D$ f" e0 G7 C* o! [5 ~
6 d+ O2 n% q1 V. q function playVideo(){& B& _2 |# r* V8 o A5 D
var videoSrc = document.getElementById("tv-src").textContent;
0 A# E- e1 L7 a* F. Z5 ^ py.link("ankiplay" + videoSrc);
! N+ S2 b3 P; W% d8 {+ ]$ Z7 V: p }
9 ]6 T# }9 ]& P5 t, ?3 n# P/ B
# `, l- `$ a; B8 P9 r h function playAudio(bPlay){
, C; |6 y" N. _! ~% \( m var player = document.getElementById('audiotag');
7 s; O3 a5 i: a F* O3 ^ var audioSrc = player.getAttribute("src");
+ ^: s( z, h( `" f if (bWin) {6 c/ s$ _8 `4 e ~: _& z
py.link("ankiplay" + audioSrc);5 b$ U: J. o. u& d" l1 ]" z8 m
} else {. u' E" \- v# d, Z& P/ p
if (bPlay) player.play(); else player.pause();
2 W. j0 A) i7 z) O( {" q }( m8 t X& K, } |. g) A ? h
}9 q u- F+ x2 h" ~5 E
0 k( P7 F4 u* B* K& E1 g# }* O ^ u
function loopAudio(cb){' l1 t, C5 x+ H& v! s/ D% }
var bLoop = cb.checked;
. N V4 F y9 c var player = document.getElementById('audiotag');5 ^: n. ]* ?# o
if (bLoop)
/ [$ L: C& W: g. R) A player.setAttribute("loop", "true");
; m+ w& D5 {% j. T else8 k& @7 k( G% H* p) W2 e( [
player.removeAttribute("loop");0 W9 }# O' X b- N! S: t
}/ h$ D2 t+ s* ?
. ^+ S0 B& c5 q; W% B
function hidex(x){# Q$ S- W7 w" L7 k5 L! k
if (x.length > 1) {
5 E9 o" C4 M1 w% } A5 Z for(var i=0; i<x.length; i++) {
$ W% z- N' l k, [) v+ ~ x[i].setAttribute("style", "display:none")0 g/ L |2 N2 ~3 Q
}
6 X* w( P. i+ W; y7 A1 Y% a } else {8 u9 C- d9 ]/ f$ R& f% Q* S
x.setAttribute("style", "display:none")5 b# l2 m) I9 t/ |; s. e2 \4 ]
}
) ^; a; ]0 N& B+ h: U2 K }( W+ [! x. ~2 F& y
4 p" Z0 }! t P8 T function update() {
4 w& H( h4 l; @6 y1 |5 D; g, O1 W var tv = document.getElementById("tv");
5 r5 ^& @8 Z3 [% L! Y if (bWin) {
& H6 ~1 ~+ q [: M4 ? tv.innerHTML = '<span>播放视频:</span><img src="_mj_play_button.png" onClick="playVideo();">';* }& T4 S {) H+ M# `
. ?" b! l% @; D
var stage_face = document.getElementById("stage-face");
* m- G* V- l+ i stage_face.setAttribute("style", "display:block")
' M9 Q/ e0 O) K W! c
0 c$ p& l) d$ I2 I% m var mobile_only = document.getElementsByClassName("mobile");4 I8 N; } j, G7 k
hidex(mobile_only);
3 }; J w* c- X& `! R8 e }
* j/ V* d' E1 T
" ^ Z' t! i3 M. ]! g' k: Z r; O. S var notes = document.getElementById("notes");
5 K& ?1 R1 f/ O& Q& s/ d4 Y' h var child = notes.getElementsByClassName("item")" r9 ]4 q7 M, w3 W6 |) Q2 Q
if (notes!=null && child!=null && child[0].textContent) {
6 A. e& J6 w6 h/ k notes.setAttribute("style", "display:block");
1 X5 x$ M3 D, L }$ a: R: B% w$ }) j2 T0 |0 n" I
}: Y E0 Y9 z9 y9 }9 {. n
- Z! b2 r6 E- ^( S window.onload = update;% A+ G( @/ b% D0 `. A" z
update();
2 ]0 h2 Y J) r& h! V2 T+ P+ o% o6 o w3 C1 v
</script>6 h3 l3 W7 {) k, w) L& o
) Z* N9 ]$ D) P
<style>
$ [+ o- y; E5 h2 u( ~' g: s0 {4 W) A# \1 z
' F1 B. ~$ {0 l
3 S# H2 d( q! d* A=========================================================
) c$ J7 ^: q! X' Q7 u<div id="stage-face" class="section" >, I A8 e2 Y. X0 V9 C/ i1 r
<img src="_mj_friends01.jpg" width="100%" height="auto">
. C" P4 v8 W* s</div>: S5 s: R1 D: i0 `) t& }4 l
<div class="section">, b, n5 s2 k8 v, q6 [
<div id="tv-src">{{Video}}</div>
6 i7 r# O# P7 [: ?. I <div id="tv" class="item">9 n, Q2 w m4 s& t# t3 ~
<video width="100%" height="auto" src="{{Video}}" controls="controls" webkit-playsinline="true" playsinline="true" poster="_mj_friends01.jpg"></video>! j+ [7 L9 ?0 G3 o6 ]
</div>
, s7 g) k$ ^1 b) c. L- q/ R3 I! e! B, `8 m' Z: [$ S6 J/ n- y3 g2 ]
<p>{{Subtitle-EN}}</p>5 C8 Y# ^* J, W- Q" W0 ]
<p class="gray">{{Subtitle-CN}}</p>
1 c9 j L) E! d2 D F# x</div>/ k8 X5 m @9 n- J- Q" e( K' y8 r
5 [ H8 A/ ~+ I) [3 C<div class="section">* T/ M% L, g) J. R5 s+ ?/ K
<div id="voice" class="item">
+ N6 z9 v7 p4 |) @ <span>播放音频:</span>
6 W9 c, y+ ^: c# a$ J0 X8 | <img src="_mj_play_button.png" onClick="playAudio(1);">; f$ ]% Z; k( c4 {8 V3 L
<img src="_mj_pause_button.png" class="mobile" onClick="playAudio(0);">3 q: Q2 n: p6 k
<audio id="audiotag" src="{{Audio}}" style="display:none"></audio>
5 [$ P, _+ _9 P* J <label class="mobile"><input id="loop" name="loop" type="checkbox" onclick="loopAudio(this);"/>循环播放</label>
$ E6 A: f) r3 c. m& a( @9 B </div>' c, M& N2 z5 f) T2 }3 @
</div>
: w/ P! t2 z8 w8 |0 J
0 a, m5 I0 y9 o# |; v' t<div class="section" id="notes">
7 f( Q; F: R2 S% u$ ^% u$ M: r' d6 q <div class="item">{{Notes}}</div>
w: o) Y" g: Z$ v% G</div> |
|