TA的每日心情 | 擦汗 2020-6-6 16:10 |
---|
签到天数: 164 天 [LV.7]常住居民III
|
发表于 2020-2-5 08:43:53
|
显示全部楼层
代码如下: 上中下 =====分割
7 W" A# e8 Z1 Y3 R0 h
% X4 R. s Z; Z2 Y. s( w% {<!-- front -->
! m3 b7 x9 q+ Q/ l0 _ P<div id="stage-face" class="section" >7 o2 M5 E7 s$ [: d6 U
<img src="_mj_friends01.jpg" width="100%" height="auto">2 c7 S) C1 L. H5 u
</div>; S" F7 Q& V* z5 S& N) r/ F
<div class="section">
7 u9 Z, f% b0 U/ o <div id="tv-src">{{Video}}</div>
4 F/ `1 P: E# G4 ` O+ G <div id="tv" class="item">
, [5 X) X; A1 N- D <video autoplay="true" width="100%" height="auto" src="{{Video}}" controls="controls" webkit-playsinline="true" playsinline="true" poster="_mj_friends01.jpg"></video>
c2 D. R6 Y, U* } </div># h' e! v' J( t, ]% f* ]
</div>' Q7 R2 v& _! T" a
" ?) k3 v0 M- }<div class="section">3 T x# N# N0 R1 ~4 v& S$ m( }4 L
<div id="voice" class="item">9 t% J" h/ W! E0 K$ j
<span>播放音频:</span>5 [0 y$ {0 m3 o
<img src="_mj_play_button.png" onClick="playAudio(1);">2 P6 b/ e* ^" B/ k6 c( ~
<img src="_mj_pause_button.png" class="mobile" onClick="playAudio(0);">
% k$ ]* h2 K/ d3 l! J8 b# R <audio id="audiotag" src="{{Audio}}" style="display:none"></audio>
2 ]& y, v0 f8 w3 d <label class="mobile"><input id="loop" name="loop" type="checkbox" onclick="loopAudio(this);"/>循环播放</label>% |% V9 c' l8 I( k
</div>; p4 M0 _! Y, G# J6 k7 }( `9 @3 d
</div>
8 ?+ _& g$ l/ j$ T, m7 t) A
' d5 D: J: @/ O* p<div class="footer">8 S- O2 f9 v7 V, m
<p>{{Timeline}}</p>5 K) T# R7 f3 P: z" k
</div>
5 P' {# b, u4 o0 u/ s
0 f9 z0 {2 y {! P<script type="text/javascript">
# v3 w8 _% v" p, Q" q if(bWin) {playVideo();}
) c' G( J4 p: F) V7 U5 b1 ^! T) X</script>, L3 K6 z7 h) T6 H. N
$ b& F% ?' m* M3 ~& u3 C% _9 d" J* d! X' \ h$ D/ U6 a" @
! Q. R, x7 \/ I
, L+ P0 Y9 }2 E
========================================================================================
& l, u) Q7 J* W4 S l; z5 i# j" ^" a! z, d# P
</style>5 D7 r7 O, y& h1 m$ `4 X. U
<style>
* t! q- Z. N" u1 e+ _1 z* e# h9 z( H3 Y( X0 s& T! _
.card {/ H5 X/ ] w+ ^0 q% Q- [4 E
font-family : Helvetica, Arial, Sans-serif;& d6 s" a% _- N1 J, I* f
font-size : 16px;, M* [. W }; X
text-align : left;+ @5 H: K5 s- K/ F2 e: f8 P
color : #1d2129;/ Z. R3 U2 B% j0 U$ {8 ~2 p
background-color : #e9ebee;
( c* C) r' M0 z+ p}
& b* ]. N/ a& \# E A& {# b& N$ A7 z# P- Q7 j1 r# b) c
.section {
5 E5 ]* s8 m5 N0 u# D6 p border : 1px solid;' f# R$ d9 ?9 ?3 Q# T
border-color : #e5e6e9 #dfe0e4 #d0d1d5;
/ Q4 a$ V4 [& o0 N9 U border-radius : 3px;
- L4 ^7 W C& k% I background-color : #fff;# v# q6 h7 h! ~+ A( z, W: N+ W
position : relative;! B5 N! j3 X* W
margin : 5px 0;$ V& o B% u6 z* m: F: @5 ]$ M
}% D0 e0 L) ?0 J! r; J" l+ |. w
.item {margin:0 10px; padding:10px 0;}
$ `0 d, f# h. p$ Z% k5 ]7 O.section p {padding:0 10px}) F, k4 `; e* @
.center {text-align:center}
% P# C% y' `8 E( R) J3 ehr {border:0; margin:0 12px;border-top:1px solid #e5e5e5;}
. _- Y" G6 T8 z3 `" _3 G4 Z#voice, #tv {1 d; f2 N: ~2 O& m! F
font-family : Helvetica, Arial, Sans-serif;
) ]7 T- g2 R9 D; W! |; p+ f font-size : 16px;! p- @0 g- t, G" Q5 F
text-align : left;% a% H+ S2 F1 z: v( l! m
color : #1d2129;
( o J' T3 ]$ Y9 S+ M8 G4 ]: _}
* x/ a) A; Z$ D$ w) P- v: D. u, {#voice label{display:block; float:right; padding-top:5px;}" i/ J1 M* [9 _3 M# }9 A! O
#voice img, #tv img{vertical-align:middle;padding:0 5px 0 10px;}1 Q! i% S/ O8 E
{- H. f& i! s+ ~
p {font-size:16px;line-height:1.5em;margin:0.5em 0; text-align:center;}
4 l f6 N* H. U4 F3 l% x2 X. gray {color:#666}( N# Y$ c; w" o p
.footer {margin-top:5rem;padding-right:5px}
& o/ ~/ }& z! j2 E+ Z/ F0 ^* @.footer p {font-size: 12px; font-style: italic; color: gray;text-align:right;}# W. x/ W$ z. O! S8 L
#tv-src, #stage-face, #notes{display:none}
" n( N1 d0 Z" _% T* k+ T+ a) I7 |$ E( g' s. { i; y7 a) W0 n. g
</style>
7 Q+ H9 N# Y" e8 l0 o% O- ^5 |3 K1 ~% h' D7 l
<script type="text/javascript">
- c3 P/ E" t% \ bWin = navigator.platform.indexOf("Win") == 0;
3 H3 d/ h% o8 x p% W; Z
* [: g/ J9 V% D/ Z4 {* O& ? function playVideo(){
4 d7 Q$ @* h, q/ L+ z var videoSrc = document.getElementById("tv-src").textContent;- [$ N; q# {2 k% w7 K% h
py.link("ankiplay" + videoSrc);3 x8 Z+ ]1 F! I" R' p$ n1 `: y
}/ Y3 x# F6 l' H$ j
" V$ x3 ^6 ^0 z2 v function playAudio(bPlay){
+ I+ T4 Q2 }" S var player = document.getElementById('audiotag');
9 f+ k# F0 _% P4 G' g var audioSrc = player.getAttribute("src");
4 D2 h2 D7 {# q& t; D( N0 _; i if (bWin) {
t9 L$ `6 b3 d: w7 I6 j1 i8 t5 U2 } py.link("ankiplay" + audioSrc);" x& [5 ]% h, C) J( }
} else {
/ c1 M9 a8 G' n7 E( s& f4 f if (bPlay) player.play(); else player.pause();
. B0 O9 T- a6 d, i }, h! }* h+ D9 n/ g' P# a
}- [6 j' ~1 I v& ~0 U ?8 }+ H4 E
) E3 h2 b' \3 Q, q5 H function loopAudio(cb){
X1 r" E, L% ~' o% r3 N var bLoop = cb.checked;; T0 f. n+ Y, @% S! }1 X; O
var player = document.getElementById('audiotag');% q ^# ^! I* o$ r5 y
if (bLoop)
' N0 T# T% @4 G, J. g8 ]3 z player.setAttribute("loop", "true");
! k0 }4 a+ C4 W! v, d: m else
0 U. U$ z& R2 O+ p) v player.removeAttribute("loop");
% B9 X- J0 B0 l0 ^* _$ \ }
# |1 J) s4 a: Q/ E W . H. D" `% G" v
function hidex(x){; V( A7 L/ G/ B4 E0 V8 e0 s
if (x.length > 1) {7 K! e+ p P) n/ ^
for(var i=0; i<x.length; i++) {$ A+ D' O3 v( F$ K5 Q
x[i].setAttribute("style", "display:none")
: W A; K7 m; ^- y7 w1 u }
2 J! U5 |; K6 d } else {/ x6 P) ]3 }% p2 r2 K
x.setAttribute("style", "display:none")
- a' f2 m" I% V( p* N$ e3 l( q }
1 R; |! u9 t, _) p }# G+ r6 O% _8 {1 j/ [6 q, L# Y
! ]% {) G: I8 [) Q" s
function update() {5 w3 e. ~+ }" u5 R- V6 e
var tv = document.getElementById("tv");
( b: E2 y# C( i* s if (bWin) {/ y. b H# }1 I( B) s. P+ W, @& d( w! q
tv.innerHTML = '<span>播放视频:</span><img src="_mj_play_button.png" onClick="playVideo();">';4 w( }3 E3 T) B* k* j5 I; p. i* U+ U
0 q( s6 p8 h1 @8 Z/ K6 V+ [0 A8 S. S
var stage_face = document.getElementById("stage-face");0 ^2 F+ u+ V& u5 l
stage_face.setAttribute("style", "display:block")
% V" i0 u; ~, c % L5 E9 M* E3 d6 d: W. q
var mobile_only = document.getElementsByClassName("mobile");
5 i$ r' o, s( }: k1 y hidex(mobile_only);
0 H6 h6 |- k7 R s0 e; _ }( e+ C. c2 t. o, Q/ ?3 K
; _; v# \& Y$ T5 ~/ R! Z% H var notes = document.getElementById("notes");
- M+ Z l5 E* }9 X0 p% B, ~ var child = notes.getElementsByClassName("item")% h. x. t, g: U1 V
if (notes!=null && child!=null && child[0].textContent) {6 I1 a# s% s) q% X0 x+ g
notes.setAttribute("style", "display:block");6 ?* k1 n) }: i; r% q
}
# G8 E1 y4 h7 |4 f) G( Y }
; D8 c) D6 t7 |6 e
5 L2 N' A' b# D, K) c. v% e8 W3 I window.onload = update;
& E" R. t! ?/ Z# c" u! g0 o( P% R update();
1 Q9 z8 {- K' P# K! K: [1 z: u, f( U9 o7 _7 c) l, ~
</script>& o) o ?( {2 q
0 _* I8 q7 q/ G& s7 M. G7 h9 r; A
<style>6 w$ c& s& F# f% z2 }" m" f1 L. M. ?
, |# B0 k2 l+ s; W
. k3 |% G+ ]" Q) b5 r2 D1 L
+ t; T0 B* T u; C4 w; Y! K=========================================================
, Q- }- v3 Q7 W& T1 v/ z) c<div id="stage-face" class="section" >2 U( I5 u, M6 z5 }+ v+ V
<img src="_mj_friends01.jpg" width="100%" height="auto">
! H7 z4 q, t! Y' g4 N! H</div>
7 W5 r# |/ l* V$ z+ @8 c( }<div class="section"># I+ N. T/ p2 v Y3 L' n J' _
<div id="tv-src">{{Video}}</div>
V7 t# H3 H% z3 e( A. b! L <div id="tv" class="item">& h; n) t0 Z" M" \. E
<video width="100%" height="auto" src="{{Video}}" controls="controls" webkit-playsinline="true" playsinline="true" poster="_mj_friends01.jpg"></video>$ k' O2 g k0 g; T; j
</div>
E+ [" n I' k0 `7 H6 f: T
! w" X& z6 T) B <p>{{Subtitle-EN}}</p>9 t1 @/ V9 F/ S. T% ?, Z2 `4 @4 @
<p class="gray">{{Subtitle-CN}}</p>6 X% d4 k w2 m" y+ u2 o7 k9 X; L
</div>1 j) }- [4 X @$ J9 C; x2 t
) E( [; e) m* l/ I: m4 g<div class="section">- s7 H) D+ W9 Z
<div id="voice" class="item">. r$ K) z( m' P1 ^! b8 C$ H
<span>播放音频:</span>
8 u2 b0 R; y: V# X d <img src="_mj_play_button.png" onClick="playAudio(1);">1 m5 V, h9 V, |) \4 }( r
<img src="_mj_pause_button.png" class="mobile" onClick="playAudio(0);">3 k+ d9 j1 c) ?; a
<audio id="audiotag" src="{{Audio}}" style="display:none"></audio>1 v( z" V& L2 ^
<label class="mobile"><input id="loop" name="loop" type="checkbox" onclick="loopAudio(this);"/>循环播放</label>9 i+ {/ j- K7 o8 i
</div>
- Q$ t8 L# G( g* G) U</div>: M# a& R3 _' S9 E( u) @
2 @/ R* k8 A/ j' l<div class="section" id="notes">: r7 b/ U7 p8 d5 Z, o3 Y
<div class="item">{{Notes}}</div>8 {! o- p* Z( K' b8 D' I4 S5 M
</div> |
|