雨巷 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

起个网名好难 发表于 2022-9-25 11:26

雨巷

本帖最后由起个网名好难于 2024-3-1 17:56 编辑 <br /><br />鼠标移进画面开始下雨，离开雨停；<br>
鼠标左键点击画面雨渐大、右键雨渐小直至雨停。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" >

<style type="text/css">
#aniImg {width:40vw;position:absolute;top:0;left:20vw;overflow:hidden;border-radius:10%;}
#outf {
width:80vw;height:60vw;margin:120px 16px 32px calc(50% - 40vw - 81px);
position:relative;overflow:hidden;
border:brown 16px outset;
}
#canv {
width:100%;Height:100%;opacity:0.3;position:absolute;top:0;left:0;
}
//https://www.huachaowang.com/data/attachment/forum/202209/24/224500cco531c1941cynbf.png
</style>

<div id="outf">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 800 600">
<image xlink:href="https://s1.ax1x.com/2022/08/31/v449Vx.jpg"
opacity="0" x="0" y="0" width="800" height="600" preserveAspectRatio="none">
<animate id="bpic0" attributeName="opacity" from="0" to="1" begin="0; epic1.end-3" dur="2s" fill="freeze"></animate>
<animate id="epic0" attributeName="opacity" from="1" to="0" begin="bpic0.begin+8" dur="4" fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2022/08/31/v44PIK.jpg"
opacity="0" x="0" y="0" width="800" height="600" preserveAspectRatio="none">
<animate id="bpic1" attributeName="opacity" from="0" to="1" begin="epic0.end-3" dur="2s" fill="freeze"></animate>
<animate id="epic1" attributeName="opacity" from="1" to="0" begin="bpic1.begin+8" dur="4" fill="freeze"></animate>
</image>
</svg>


<img class="animate__animated animate__slower animate__rotateIn"
src="http://www.keai99.com/data/attachment/forum/202208/31/145900r3v3l41lll38jj0i.jpg" id="aniImg" />
<canvas id="canv"></canvas>
<div id="lyricShow" style="width:80%;height:100px;position:absolute; left:10%; bottom:40px;"></div>
</div>
<textarea id="lrc_content" style="display:none;">
雨巷佳人-么健
作词:修篱种菊
作曲:金琳琳
演唱:么健
你从江南雨巷里走来
柔柔春风亲吻你裙摆
小桥流水乌篷船的桨声
醉了醒了那沉静楼台
你从如诗画卷里走来
嘈嘈切切琴音落玉盘
丝丝缕缕吴侬细语呢喃
羞了含苞待放的那朵莲
俏丽的身影起舞翩翩
芳华逝去你却妩媚依然
倩影倒映在平静的湖面
怎叫人不为你顾盼迷恋
油纸伞下清丽旖旎诗行
石拱桥记忆着多少古往
江南雨巷的平江府姑娘
亭亭玉立宛在那水中央
你从如诗画卷里走来
嘈嘈切切琴音落玉盘
丝丝缕缕吴侬细语呢喃
羞了含苞待放的那朵莲
俏丽的身影起舞翩翩
芳华逝去你却妩媚依然
倩影倒映在平静的湖面
怎叫人不为你顾盼迷恋
油纸伞下清丽旖旎诗行
石拱桥记忆着多少古往
江南雨巷的平江府姑娘
亭亭玉立宛在那水中央
油纸伞下清丽旖旎诗行
石拱桥记忆着多少古往
江南雨巷的平江府姑娘
亭亭玉立宛在那水中央
亭亭玉立宛在那水中央
</textarea>


<script type="text/javascript" >
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r=k;k=||e}];e=function(){return'(|1\\w)'};c=1};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p}('v m=[],o=[],p=,w=0;v f=0,F=0,r=30,a,4;v Q=7(e){b R=0.25*(G+c.l()*100);b k={H:5.5*(c.l()*6+3),n:I,d:e,9:-G,h:R,corlor:\'#eee\'};o.S(k)};7 T(x,y){b U={n:I,d:x,9:y,z:(c.l()-0.5)*8,A:c.l()*(-6)-3,V:c.l()*1.5+1};J U}7 K(x,y){b W=c.floor(c.l()*5+5);B(b i=0;i<W;i++){m.S(T(x,y))}}7 L(){b X=0.5,Y=35;g(m.M>0){m.C(7(e){e.z=e.z+(f/2);e.d=e.d+e.z;e.A=e.A+X;e.9=e.9+e.A;g(e.9>4.t){e.n=D}})}B(b j=m.M-1;j>=0;j--){g(m.n){m.Z(j,1)}}f=f+(F-f)/G;B(b i=0;i<r;i++){Q(c.l()*2*4.u-(0.5*4.u))}b 11=4.t-c.l()*4.t/5;o.C(7(e){b 12=c.sqrt(((e.d+f*e.h)-p)*((e.d+f*e.h)-p)+(e.9+e.h-p)*(e.9+e.h-p));g(12<Y){e.n=D;K(e.d+f*e.h,e.9+e.h)}g((e.9+e.h)>11){e.n=D;K(e.d+f*e.h,e.9+e.h)}g(e.9>=4.t){e.n=D}13{e.9=e.9+e.H;e.d=e.d+e.H*f}});B(b j=o.M-1;j>=0;j--){g(o.n){o.Z(j,1)}}14();w=15(L)}7 14(){a.16(0,0,4.u,4.N);a.17=1;o.C(7(k){a.18=k.color;a.19();a.moveTo(k.d,k.9);a.lineTo(k.d+k.h*f,k.9+k.h);a.1a()});a.17=0.5;a.18="#fff";m.C(7(e){a.19();a.arc(e.d,e.9,e.V,c.l()*c.PI*2,1*c.PI);a.1a()})}7 O(e){b x=e.1c,y=e.1d,s=e.1e;while(s!=null){x+=s.1c;y+=s.1d;s=s.1e}J{x,y}}window.oncontextmenu=7(e){J I};v rainBG=7(1f,1g){b q=1h.1i(1f);4=1h.1i(1g);a=4.getContext(\'2d\');4.u=4.P;4.N=4.t;q.E(\'mousemove\',7(e){p=e.1j-O(q).x;p=e.clientY-O(q).y;F=(e.1j-4.P/2)/(4.P/2)});q.E(\'mouseover\',7(){w=15(L)});q.E(\'mouseout\',7(){cancelAnimationFrame(w);a.16(0,0,4.u,4.N)});q.E(\'mousedown\',7(e){g(e.1k==0){g(r<55)r+=10}13 g(e.1k==2){g(r>5)r-=10}})}',[],83,'||||canv|||function||posy|ctx|let|Math|posx||speedx|if||||line|random|dropList|die|linelist|mousePos|outBlk|lineNum|pa|clientHeight|width|var|uID|||vx|vy|for|forEach|true|addEventListener|maxspeedx|50|speed|false|return|madedrops|update|length|height|offset|clientWidth|createLine|temp|push|createDrop|drop|radius|maxi|gravity|mouseDis|splice||endLine|dis|else|render|requestAnimationFrame|fillRect|lineWidth|strokeStyle|beginPath|stroke||offsetLeft|offsetTop|offsetParent|outfID|canvID|document|getElementById|clientX|button'.split('|'),0,{}))
</script>

<script type="text/javascript" >
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r=k;k=||e}];e=function(){return'(|1\\w)'};c=1};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p}('F G=c(){N 4.O.apply(4,arguments)};G.prototype={constructor:G,O:c(5){4.f=new Array();4.H=u.P(5.lrcTxtID);v=4.H.I;4.9=u.P(5.lrcShowID);4.9.8.Q=5.R?5.R:\'1em\';4.9.8.fontFamily=5.S?5.S:\'å¾®è½ˉé›…é»‘\';4.9.8.fontWeight=5.gcct?\'bold\':\'normal\';4.9.8.T=5.U?5.U:\'center\';4.9.8.V=5.W?5.W:\'gray\';4.9.8.cursor=\'pointer\';w=5.w?5.w:\'red\';l=5.X?5.X:0;4.J=5.Y?5.Y:1;4.Z=5.11?5.11:o;4.12(v);4.13(l,5.i);4.14(5.audioURL)},13:c(l,i){x(k=0;k<4.J;k++){h=u.15("16");h.8.17="block";h.8.marginBottom=\'4px\';e(k==0){h.8.V=w;h.8.Q=\'120%\';e(i){p=\'0 -y z \'+i+\',\';p+=\'-y 0 z \'+i+\',\';p+=\'y 0 z \'+i+\',\';p+=\'0 y z \'+i;h.8.textShadow=p}}e(l!=0)h.8.T="left";4.9.18(h)}e(l!=0){4.9.8.writingMode=\'tb-A\';4.9.8.msWritingMode=\'tb-A\';4.9.8.mozWritingMode=\'1a-A\';4.9.8.webkitWritingMode=\'1a-A\'}},12:c(v){F q=v.1b(/\\r|\\n|\\r\\n/);x(n=0;n<q.s;n++){B=q.match(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]/g);e(B){K=q.lastIndexOf(\']\');e(K>0)1c=q.1d(K+1);x(m=0;m<B.s;m++){C=B.1d(1).replace(\']\',\'\').1b(/:|\\./);L=parseFloat(1e(C,10)*60+1e(C,10)+\'.\'+C,10);e(4.f.s==0&&L!=0){4.f.1f()}4.f.1f()}}}4.f.sort(c(a,b){N(a-b)})},14:c(1g){4.7=u.15("1h");4.7.loop=o;4.7.muted=o;4.7.src=1g;4.7.D=1i;4.7.8.opacity=0.3;4.9.18(4.7);F 6=4;4.j=0;4.7.t(\'ended\',c(){6.j=0;6.H.I=\'\';e(6.Z)6.7.E();1j{6.7.D=1i}});4.7.t(\'playing\',c(){6.7.D=o});4.7.t(\'error\',c(){1k.1l("1h wrong, remove E start event");6.9.8.17=\'none\';6.9.removeChild(4)});4.7.t(\'timeupdate\',c(){e(6.j<6.f.s){e(4.currentTime>6.f){M=6.j;1m=6.9.getElementsByTagName(\'16\');x(k=0;k<6.J;k++){1m.I=(M+k)>=6.f.s?"":6.f}6.j++}}});4.9.t(\'click\',c(){e(6.7.paused){6.7.E()}1j{6.7.1n()}});try{4.7.E()}catch(1o){1k.1l(1o.message)}},stopMusic:c(){4.7.1n();4.7.D=o;4.7=null},};',[],87,'||||this|opts|that|mObj|style|showLrcObj|||function||if|lrcVec||sItem|shys|idx||sMode|||false|shadowStr|lyriclist||length|addEventListener|document|lyricTxt|gcys|for|1px|0px|rl|chkTime|ta|controls|play|var|lrcPlayer|lyricTxtObj|innerHTML|sLine|tIdx|_t|_idx|return|init|getElementById|fontSize|gczh|gczt|textAlign|dqfs|color|gcys1|showMode|gchs|isLoop||playLoop|handleLrc|prepareShow|genPlayer|createElement|span|display|appendChild||vertical|split|lrcTxt|substr|parseInt|push|mUrl|audio|true|else|console|log|_spans|pause|err'.split('|'),0,{}))
</script>

<script type="text/javascript">
var imgs=[
"https://s1.ax1x.com/2022/08/31/v44Yss.jpg",
"https://s1.ax1x.com/2022/08/31/v44JMj.jpg",
"https://s1.ax1x.com/2022/08/31/v448zQ.jpg",
"https://s1.ax1x.com/2022/08/31/v443Rg.jpg",
"https://s1.ax1x.com/2022/08/31/v441JS.jpg",
"https://s1.ax1x.com/2022/08/31/v44li8.jpg",
"https://s1.ax1x.com/2022/08/31/v44MIf.jpg",
"https://s1.ax1x.com/2022/08/31/v44KdP.jpg",
"https://s1.ax1x.com/2022/08/31/v44uZt.jpg",
"https://s1.ax1x.com/2022/08/31/v44mqI.jpg",
"https://s1.ax1x.com/2022/08/31/v44esA.jpg",
"https://s1.ax1x.com/2022/08/31/v44ZMd.jpg",
"https://s1.ax1x.com/2022/08/31/v44ExH.jpg",
"https://s1.ax1x.com/2022/08/31/v44ARe.jpg",
"https://s1.ax1x.com/2022/08/31/v44kGD.jpg",
"https://s1.ax1x.com/2022/08/31/v44FPO.jpg",
"https://s1.ax1x.com/2022/08/31/v4hjxJ.jpg",
"https://s1.ax1x.com/2022/08/31/v44Ca6.jpg",
"https://s1.ax1x.com/2022/08/31/v4hX24.jpg",
"https://s1.ax1x.com/2022/08/31/v44Sq1.jpg",
"https://s1.ax1x.com/2022/08/31/v4hzrR.jpg",
"https://s1.ax1x.com/2022/08/31/v4hxM9.jpg"
];
var opts = {
// 下面3个参数是必须的！
lrcTxtID:'lrc_content',
lrcShowID:"lyricShow",
audioURL:"https://music.163.com/song/media/outer/url?id=1456216220.mp3",
// 可选的参数
gczh:'40px',
gczt:'楷体',
gcct:true,
dqfs:'center',
gcys:'red',
gcys1:'#ccf',
//-------------------------------------------------------*
playLoop:true,
showMode:0,
gchs: 2
}
var dhlm= ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomRight","fadeOutBottomLeft","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"];
var aniClassNames = 'animate__slower animate__animated animate__';
var aniImg = document.getElementById('aniImg');

function aniEventHandle() {

let imgIdx = parseInt(Math.random() * imgs.length);
let aniIdx = parseInt(Math.random() * dhlm.length);
//console.log(imgIdx + " : " +aniIdx);
aniImg.src = imgs;
aniImg.className = aniClassNames+dhlm;
}

function aniAct() {

aniImg.src = imgs;
aniImg.classList.add('animate__'+dhlm);

//aniImg.addEventListener('animationend', aniEventHandle);
setInterval(aniEventHandle, 3000);

}

rainBG("outf", "canv");aniAct();
new lrcPlayer(opts);
</script>

红影发表于 2022-9-25 12:06

这个有意思。貌似鼠标点上去，不仅雨量发生变化，透明度也发生变化呢，很奇特{:4_187:}

红影发表于 2022-9-25 12:07

图片轮播方式也很漂亮，欣赏好帖{:4_187:}

起个网名好难 发表于 2022-9-25 12:13

红影发表于 2022-9-25 12:07
图片轮播方式也很漂亮，欣赏好帖

谢谢欣赏。

为了适应这论坛，摸索着把其它论坛的帖子搬过来，费了老大的劲{:5_102:}

寒冬残荷 发表于 2022-9-25 14:08

欣赏了！是的，我经您指教后现也发现这里不错，因为可以在手机上的微信里浏览，手机上的“电脑版“很好，可放大和缩小页面。有的论坛做不到这点，有的论坛微信不给打开。

寒冬残荷 发表于 2022-9-25 14:11

新来摸不着门路，折腾了一个晚上和一个上午！{:5_149:}

起个网名好难 发表于 2022-9-25 14:15

寒冬残荷发表于 2022-9-25 14:08
欣赏了！是的，我经您指教后现也发现这里不错，因为可以在手机上的微信里浏览，手机上的“电脑版“很好，可 ...

我手机的两个浏览器直接打开都可以播放，区别只是自动和不自动。

起个网名好难 发表于 2022-9-25 14:21

寒冬残荷发表于 2022-9-25 14:11
新来摸不着门路，折腾了一个晚上和一个上午！
打发时间的标配{:5_106:}

红影发表于 2022-9-25 16:02

起个网名好难发表于 2022-9-25 12:13
谢谢欣赏。

为了适应这论坛，摸索着把其它论坛的帖子搬过来，费了老大的劲

呵呵，现在大都是这样的论坛啊，只是花潮升级成了安全模式，您说的就是适应安全模式吧{:4_204:}

起个网名好难 发表于 2022-9-25 16:36

红影发表于 2022-9-25 16:02
呵呵，现在大都是这样的论坛啊，只是花潮升级成了安全模式，您说的就是适应安全模式吧

您和小辣椒管理员都说是论坛提高了安全级别，我们作为新手需要适应，这肯定没问题。

既然是论坛提升了安全等级，为什么有些浏览器（firefox）仍然不受影响，手机上的又基本与电脑上表现不同咧？

作为来论坛的玩家不需要知道为什么，只要知道怎么才行就OK，对吧。

醉美水芙蓉 发表于 2022-9-25 16:39

起个网名好难 发表于 2022-9-25 16:52

醉美水芙蓉发表于 2022-9-25 16:39
欣赏老师佳作！

谢谢您的欣赏！

红影发表于 2022-9-25 17:22

起个网名好难发表于 2022-9-25 16:36
您和小辣椒管理员都说是论坛提高了安全级别，我们作为新手需要适应，这肯定没问题。

既然是论坛提升了 ...

其实对于论坛模式我也不懂，只是听说https比http更安全，所以就升级了一下。
你说的对，其实大家也不需要弄懂它，只知道怎么玩就好了{:4_204:}

起个网名好难 发表于 2022-9-25 17:43

红影发表于 2022-9-25 17:22
其实对于论坛模式我也不懂，只是听说https比http更安全，所以就升级了一下。
你说的对，其实大家也不需 ...
https://img2.baidu.com/it/u=3880965725,3873839324&fm=253&fmt=auto&app=138&f=JPEG

红影发表于 2022-9-25 18:49

起个网名好难发表于 2022-9-25 17:43

反正我也什么都不懂，我只会玩{:4_173:}

起个网名好难 发表于 2022-9-25 18:51

红影发表于 2022-9-25 18:49
反正我也什么都不懂，我只会玩

差不多就是玩，不过您不同还有管理重任在身{:5_106:}

深秋红枫 发表于 2022-9-25 21:00

红影发表于 2022-9-25 12:06
这个有意思。貌似鼠标点上去，不仅雨量发生变化，透明度也发生变化呢，很奇特

这个帖子的下雨，除了方向、雨势及水滴反溅等有鼠标感应外，与马黑黑老师的略有不同：点击图外会雨停，点去图里又下雨了！特此介绍推荐一下，确实是很有质量的好贴！

红影发表于 2022-9-25 21:45

起个网名好难发表于 2022-9-25 18:51
差不多就是玩，不过您不同还有管理重任在身

这里的人都是休闲时候来玩玩的，不需要什么管理的呢，我也是其中玩的{:4_173:}

红影发表于 2022-9-25 21:45

深秋红枫发表于 2022-9-25 21:00
这个帖子的下雨，除了方向、雨势及水滴反溅等有鼠标感应外，与马黑黑老师的略有不同：点击图外会雨停，点 ...

的确很奇妙的帖子，漂亮{:4_204:}

页: [1] 2

花潮论坛's Archiver

雨巷