|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?免费注册
x
wallpaper里面看到有人制作能靠鼠标点击翻页的漫画 直接把桌面变成阅读器了
) C( N1 O. H4 p2 S) d感觉挺有意思的 但是复制他的代码换图片后高宽比有问题 有大佬能解决一下吗
- y' q/ [# a4 ?& ]+ i! s个人就是想做个像ppt一样点击左键就翻页的网页应该不是很复杂吧
" N; e& b$ d6 R; A他们代码如下<html>
9 M5 q( L+ i' V <head>6 X# K3 H. _/ ]% m. I(欢迎访问老王论坛:laowang.vip)
<title>Office</title>& {4 ?0 P H' E6 j ~' R" R(欢迎访问老王论坛:laowang.vip)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />. O$ b5 N: ?, b/ P" d& c) B3 j& p/ |( S(欢迎访问老王论坛:laowang.vip)
</head>* Y9 Q/ L9 L7 d! @% W(欢迎访问老王论坛:laowang.vip)
<body></body>1 N) N, `# {! m% ?; P' n9 K; t0 b; @# f(欢迎访问老王论坛:laowang.vip)
<style>
' o7 d6 T4 u# Q" V *{ margin: 0; padding: 0; box-sizing: border-box; }
5 D+ O9 [/ T/ G8 z/ ^) q4 V4 ?2 } body, html{ width: 100%; height: 75%; margin: 0; padding: 0; color:rgb(255, 255, 255); }4 B* V" F8 q. r6 @: X(欢迎访问老王论坛:laowang.vip)
body{ background: #000; overflow: hidden; font-size:1.5rem; font-family:'verdana'; text-shadow: 1px 1px 2px #828282; }
7 B3 \% i; _. d# H# a img{ position:absolute; top:0px; left:0px; opacity:0; transition: top 0.1s ease, left 0.1s ease, opacity 1s ease; }
3 c$ ^' q. F3 {# R1 ?4 P </style>
+ S k& B5 D$ v6 C5 V <script>- ~: }/ _. H3 ^1 a* @. W(欢迎访问老王论坛:laowang.vip)
var zoom=1;1 _) _+ Y2 x- i E/ [) L(欢迎访问老王论坛:laowang.vip)
var xray=0.4;
# u4 X8 P5 l* X+ j var lyrW=1866;% A7 J- D& I8 H* m5 {4 ?6 z" J P$ `(欢迎访问老王论坛:laowang.vip)
var lyrH=1468;
9 [3 m# _& m- h: A' R# x var lTop=["_01.jpg","_02.jpg","_05.jpg","_06.jpg","_07.jpg","_08.jpg","_09.jpg","_10.jpg","_11.jpg","_12.jpg","_13.jpg","_14.jpg","_15.jpg","_16.jpg","_17.jpg"];* w% [2 N4 y' h% v(欢迎访问老王论坛:laowang.vip)
var lMed=["a2.jpg","a4.jpg"];
" d# ?0 m& A4 W( O" } //var lLow=["a2.jpg","a4.jpg"];
+ w+ U& G; U& ?
( v. E3 L3 a$ M/ { D$ W6 P0 K var winW = window.innerWidth;& L2 ^, R! G- t' j$ z(欢迎访问老王论坛:laowang.vip)
var winH = window.innerHeight;
& `* {: r% U- O" G" L: A! U var xrxS = winW>winH ? winW*xray : winH*xray;3 A; q2 O$ t" d( ?* z. H: I8 o(欢迎访问老王论坛:laowang.vip)
& ^1 U2 L9 g6 _' o function xRay_del(elm) {
# e+ k8 j( c. S( {4 ` elm.style['-webkit-mask-image']='';$ Q, p: o I/ x; c& j(欢迎访问老王论坛:laowang.vip)
elm.style['-webkit-mask-repeat']='';% u8 N( W3 [0 g: A: T% ? Q(欢迎访问老王论坛:laowang.vip)
elm.style['-webkit-mask-size']='';
) U( i) ]0 K* \" z' l; b: G5 | } }2 l% V: K3 i X, H! P$ j(欢迎访问老王论坛:laowang.vip)
function xRay_add(elm) {0 g2 e0 ^" |; s2 ^(欢迎访问老王论坛:laowang.vip)
elm.style['-webkit-mask-image']='radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)';
9 O2 G. m1 u& |, U6 e- r/ B: f elm.style['-webkit-mask-repeat']='no-repeat';) e2 O8 L; Y* `) ]+ T(欢迎访问老王论坛:laowang.vip)
elm.style['-webkit-mask-size']=xrxS+'px '+xrxS+'px';- l F" e5 R" m5 ` t( }1 M(欢迎访问老王论坛:laowang.vip)
}
" G# n. E6 Z# B; W' \( ]& M) e function cycle(rotate=true) {
, x5 ^* q( v4 U! L# e if(rotate) rotary.push(rotary.shift());
: f" W! _$ Y+ k2 i4 e if(xRay_status){+ ` c0 Y" {7 d$ U R(欢迎访问老王论坛:laowang.vip)
document.body.insertBefore(rotary[1],document.body.firstChild);
8 \. C/ ~; G$ h9 a document.body.insertBefore(rotary[0],document.body.firstChild);
3 {: ^! u& b& X4 y% }# y+ I0 T, T) z) K7 h" c* J2 u% f* [(欢迎访问老王论坛:laowang.vip)
rotary[0].style.opacity=1;7 c7 P& y1 n. T3 Z, {7 f0 Q(欢迎访问老王论坛:laowang.vip)
rotary[1].style.opacity=1;: Z9 v2 ^( K7 j$ Z(欢迎访问老王论坛:laowang.vip)
for(var l=2;l<rotary.length;l++)
: U: D j3 K* f8 o* J+ G4 }+ Q rotary[l].style.opacity=0;
! o9 I& T p& P; N' v' U/ a" @ - K6 J$ l) b5 ~3 A7 J2 b+ P(欢迎访问老王论坛:laowang.vip)
xRay_del(rotary[0]);5 x. \1 Q2 k8 a' Y- M(欢迎访问老王论坛:laowang.vip)
xRay_add(rotary[1]);! ?8 k" c, K# k(欢迎访问老王论坛:laowang.vip)
} else {0 F# C. q$ o9 }$ j) Z(欢迎访问老王论坛:laowang.vip)
document.body.insertBefore(rotary[0],document.body.firstChild);
t5 _9 c. h+ a! J2 r1 O, `6 W1 ^ document.body.insertBefore(rotary[1],document.body.firstChild);6 `' U* d5 z1 v$ @8 B+ h# i' p(欢迎访问老王论坛:laowang.vip)
2 ^8 }9 j7 b/ t(欢迎访问老王论坛:laowang.vip)
rotary[0].style.opacity=1;& p- m0 ]- p$ ?) s& m( _(欢迎访问老王论坛:laowang.vip)
for(var l=1;l<rotary.length;l++)
* p/ n9 x/ h( X rotary[l].style.opacity=0;
( `- e3 p/ {9 |5 H5 _ 1 v. P( ^# [5 U9 L0 h(欢迎访问老王论坛:laowang.vip)
xRay_del(rotary[0]);
" M: d8 a6 @# l& k xRay_del(rotary[1]);; I* T0 n! i" O: X(欢迎访问老王论坛:laowang.vip)
}2 F! Z# @. a* Q: @% S# j# `. [(欢迎访问老王论坛:laowang.vip)
}
5 u2 G ]6 N3 }9 ], K# _
) V0 D& V: n9 i# {& n" q rotary=[];
2 L6 }; q/ W. t) y0 S i6 c* E for(var i=0;i<lTop.length;i++) {' d5 }5 I. x A1 L$ d3 W7 ^% a( [: t(欢迎访问老王论坛:laowang.vip)
var layer=document.createElement('img');
8 M) G: B; o0 ?3 C: b% C' Q layer.id='L'+i;, i) x5 @: _# g" J' G: k(欢迎访问老王论坛:laowang.vip)
layer.style.width=lyrW+'px';
( H) x2 }- R% F2 @; J% O7 S' }6 C3 T layer.style.height=lyrH+'px';
+ s' p9 P! h9 ^3 b( G5 m* y layer.src=lTop[i];
[ L) ~% W0 s4 i layer.onclick=cycle;, n/ p( a& V+ @% S(欢迎访问老王论坛:laowang.vip)
rotary[i]=layer;
, s6 e# ~# f5 P$ E- Z# |: Z if(i==0) layer.style.opacity=1;% p. S3 e# b$ k0 V% ]3 w(欢迎访问老王论坛:laowang.vip)
document.body.appendChild(layer);
% m x- F& o1 C! y5 y* Q- K }4 j) {8 Q1 K n# `/ g! H(欢迎访问老王论坛:laowang.vip)
cycle(false);
! a8 b1 \1 r5 s( g: _- e9 M
/ G" h4 q+ `$ D8 u; b- @ while( (lyrW/winW)>zoom || (lyrH/winH)>zoom ) { lyrW=lyrW*0.99; lyrH=lyrH*0.99; }* C/ F6 O$ T! T9 G9 g8 @# Q(欢迎访问老王论坛:laowang.vip)
while( (lyrW/winW)<zoom || (lyrH/winH)<zoom ) { lyrW=lyrW*1.01; lyrH=lyrH*1.01; }" F' s6 b! p8 A8 d(欢迎访问老王论坛:laowang.vip)
for(var l=0;l<rotary.length;l++) { rotary[l].style.width=lyrW+'px'; rotary[l].style.height=lyrH+'px'; }
- [, k q; d: e: A* c( c; W
/ r( k! t5 m& N. p* q. J var gapW = lyrW-winW;; h9 a# R. W1 X |4 Y8 q# z' T(欢迎访问老王论坛:laowang.vip)
var gapH = lyrH-winH;
& A: B0 I9 G$ ~) F% T/ J var anchorW = (gapW/2)*-1;% h7 b$ V I# N(欢迎访问老王论坛:laowang.vip)
var anchorH = (gapH/2)*-1;
! e( r' ^) f6 z* C U var centerW = winW/2;( K* P$ r1 ~5 D4 C' e6 b(欢迎访问老王论坛:laowang.vip)
var centerH = winH/2;
4 X3 x, t5 O- @$ G& V: m+ g document.body.onmousemove=(e)=>{
3 p8 U b E! H1 G5 q B var mouseX = e.clientX;
( u, l7 D( s3 R g2 Y var mouseY = e.clientY;' s3 E' U V F4 G2 s# I0 f7 h(欢迎访问老王论坛:laowang.vip)
var percX = ((mouseX-centerW)/winW);' n4 G# U5 @. ?: e(欢迎访问老王论坛:laowang.vip)
var percY = ((mouseY-centerH)/winH);
8 M) N" Q/ c/ o1 [ var newW = anchorW-(gapW*percX);
( W2 t" K" c% K6 h9 a. a- n9 ? var newH = anchorH-(gapH*percY);
& @6 f, H6 v9 e- _" g4 @ for(var l=0;l<rotary.length;l++) { rotary[l].style.left=newW+'px'; rotary[l].style.top=newH+'px'; }
) k0 d n0 M4 G" G E& N9 t
; T. z3 }$ ]1 `7 S* b var xrX=(mouseX+(newW*-1))-(xrxS/2);
; {" z9 w% d" ^; a7 p: J var xrY=(mouseY+(newH*-1))-(xrxS/2);- A% u5 c5 [, Y# |% U- b7 _(欢迎访问老王论坛:laowang.vip)
rotary[1].style['-webkit-mask-position-x']=xrX+'px';) C- U- n% d& [0 ?' b9 s0 J(欢迎访问老王论坛:laowang.vip)
rotary[1].style['-webkit-mask-position-y']=xrY+'px';
1 ~ c+ r% d4 ~( K! |+ W }
% O% A4 L& j2 c
6 t4 ?/ ]: k4 C3 f5 c8 y/ Y // Panel
% n b+ i- Q! w. V5 r0 d var panel = document.createElement('div');! J: h- k9 E0 ~ n& M(欢迎访问老王论坛:laowang.vip)
panel.style='position:absolute; top:0rem; right:0.4rem; display:flex; flex-direction:column; font-size:2rem; line-height:2rem; ';- }9 ^) L- b- F7 g5 f* j. n4 ?( w(欢迎访问老王论坛:laowang.vip)
document.body.appendChild(panel);$ R$ ?0 h; q6 I& [(欢迎访问老王论坛:laowang.vip)
V+ P0 F+ f3 y( B1 `6 v7 v" m(欢迎访问老王论坛:laowang.vip)
var rpt_evt = null;
3 s" [( S4 g( F var rpt_deg = 0;" }8 e. p$ \6 |(欢迎访问老王论坛:laowang.vip)
var rpt = document.createElement('div');3 o; M) u6 M9 g: |5 f, z(欢迎访问老王论坛:laowang.vip)
rpt.dataset.active='f';
# y: u1 d$ o$ k rpt.innerHTML='';
3 k4 ^% s4 g8 f rpt.onclick=(e)=>{
7 u& X- J5 Q5 O if(rpt.dataset.active=='f'){/ V: I7 u5 R/ ?& k( Q(欢迎访问老王论坛:laowang.vip)
rpt.dataset.active='t';0 f* \; v5 Y/ k0 y(欢迎访问老王论坛:laowang.vip)
rpt_evt = setInterval(()=>{
! }1 p/ s2 K& _7 n8 s1 x4 U" @ if(rpt_deg==360){ cycle(); rpt_deg=0; }+ |/ a6 M! g& ?, t. O# t: H, z(欢迎访问老王论坛:laowang.vip)
rpt_deg++; rpt.style.transform='rotate('+rpt_deg+'deg)';
& {- `( W9 j, W },166);( r# u4 w2 F+ C8 b' \7 T(欢迎访问老王论坛:laowang.vip)
} else {
: S* N) B8 h$ r B rpt.dataset.active='f';8 S8 f: L% w' |(欢迎访问老王论坛:laowang.vip)
rpt_deg=0; rpt.style.transform='rotate('+rpt_deg+'deg)';
+ F4 F9 w- g! T clearInterval(rpt_evt);
- T7 H0 Q8 n1 F9 b }6 t5 s: A% i' ] D# E(欢迎访问老王论坛:laowang.vip)
};( w3 f3 p9 z2 W2 m, ](欢迎访问老王论坛:laowang.vip)
panel.appendChild(rpt);' r* p2 f# d2 _/ C(欢迎访问老王论坛:laowang.vip)
% E8 r5 L: C* Q1 ^- P! R2 H/ I(欢迎访问老王论坛:laowang.vip)
var xRay_status=false;# Q" u5 t( l- V8 G! l: ](欢迎访问老王论坛:laowang.vip)
var xRay_btn = document.createElement('div');6 T1 g* P+ D" t! F- ]% E% N+ p(欢迎访问老王论坛:laowang.vip)
xRay_btn.innerHTML='';
/ M* f( B' P* H' L: l0 }" }2 H xRay_btn.onclick=(e)=>{; ^- w0 x* Y! F(欢迎访问老王论坛:laowang.vip)
if(xRay_status==false) { // ON
) H: l0 Z$ I, T: T xRay_status=true; cycle(false); xRay_btn.style.color='rgb(255, 255, 0)';4 E, u) T' K7 \(欢迎访问老王论坛:laowang.vip)
} else { // OFF
* K! k0 d. t( Y* D+ |; W xRay_status=false; cycle(false); xRay_btn.style.color='rgb(255, 255, 255)';
$ U- g. I! q# C9 [1 m; } }$ x( F7 W: w! L% R( }* i# M% ~9 h(欢迎访问老王论坛:laowang.vip)
};
% m. K1 f# Q% A( e panel.appendChild(xRay_btn);: N0 d( c/ r7 n# m- f/ k(欢迎访问老王论坛:laowang.vip)
. Y+ H8 }5 ^$ q5 F' N9 `$ u(欢迎访问老王论坛:laowang.vip)
var qlt_btn = document.createElement('div');$ P( _# w/ \; L3 m/ B$ @7 O(欢迎访问老王论坛:laowang.vip)
qlt_btn.innerHTML='';
7 v. d8 c c1 b' W6 [5 @+ x qlt_btn.dataset.qlt='top'; qlt_btn.style.color='rgb(220,20,60)';
8 F! Y! g0 \: K& r# i qlt_btn.onclick=(e)=>{ qlt_switch(qlt_next(qlt_btn.dataset.qlt)); }' t0 x3 S& {, ?/ q% h) g! w(欢迎访问老王论坛:laowang.vip)
panel.appendChild(qlt_btn);. ^; R- q3 G6 P(欢迎访问老王论坛:laowang.vip)
function qlt_next(qlt){" r4 _7 n ~/ V/ f" m( S6 o(欢迎访问老王论坛:laowang.vip)
switch(qlt){: |4 D2 c3 d- Z) c' e1 s. I W(欢迎访问老王论坛:laowang.vip)
case 'top': if(typeof lMed !=='undefined') return 'med'; else return 'top'; break;
% |# A& E4 M9 g7 L" l5 ~ case 'med': if(typeof lLow !=='undefined') return 'low'; else return 'top'; break;7 L( ~( F. T& @ K(欢迎访问老王论坛:laowang.vip)
case 'low': return 'top'; break;8 i* ]1 e2 _- @(欢迎访问老王论坛:laowang.vip)
}! u& u/ V3 D% g& m! {& ~(欢迎访问老王论坛:laowang.vip)
}1 a' H1 F" s/ d0 p& X) q(欢迎访问老王论坛:laowang.vip)
function qlt_switch(qlt){3 ?! ~4 D( n6 k7 }6 i$ j(欢迎访问老王论坛:laowang.vip)
qlt_btn.dataset.qlt=qlt;: X7 ?3 f6 _2 L1 `2 v(欢迎访问老王论坛:laowang.vip)
switch(qlt){+ \3 f3 [& p) J7 p7 o A! A6 U(欢迎访问老王论坛:laowang.vip)
case 'top': qlt_btn.style.color='rgb(220, 20, 60)'; for(var i=0;i<lTop.length;i++) document.getElementById('L'+i).src=lTop[i]; break;
# E' `4 }, r! C case 'med': qlt_btn.style.color='rgb(204,204, 0)'; for(var i=0;i<lMed.length;i++) document.getElementById('L'+i).src=lMed[i]; break;- }; f J; s! o; m(欢迎访问老王论坛:laowang.vip)
case 'low': qlt_btn.style.color='rgb( 60,179,113)'; for(var i=0;i<lLow.length;i++) document.getElementById('L'+i).src=lLow[i]; break;
- Q+ j* T& f3 K/ Z }+ Y( S- N7 d/ p. Z" Y. T; B(欢迎访问老王论坛:laowang.vip)
}
) T/ p5 O, k# `6 k# c5 p! [- p
0 W0 D y! d5 h: |- Q- I </script>
" R% y8 {: K0 d) E c" m* r</html>
n! F( H( V& H; `- A, m* P. P9 E(欢迎访问老王论坛:laowang.vip)
; x: ?# R) j+ N9 }. s9 o! n(欢迎访问老王论坛:laowang.vip)
|
|