Created
April 15, 2017 13:28
-
-
Save Myscript2010/c7395200a3dce6ebc803d078f4b7cda3 to your computer and use it in GitHub Desktop.
Kucing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type="text/css"> | |
| body {background-image: url();color:red;height:100%;overflow:hidden;} | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| } | |
| body { | |
| background: url("https://sites.google.com/site/sule62001/sule2001code/Bg-triplek-mys2010.jpg"); | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| header { | |
| -o-transition-duration: 0.3s; | |
| -moz-transition-duration: 0.3s; | |
| -webkit-transition-duration: 0.3s; | |
| transition-duration: 0.3s; | |
| padding: 0px 0; | |
| position: fixed; | |
| top:-4px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 6px; | |
| background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099); | |
| border-bottom: 3px solid #333; | |
| -webkit-animation: shadow 6s ease-in-out infinite; | |
| animation: shadow 6s ease-in-out infinite; | |
| } | |
| .ap { | |
| position: fixed; | |
| right: 0; | |
| bottom:-19px; | |
| left: 0; | |
| height:78px; | |
| margin: auto; | |
| font-family: Arial, sans-serif; | |
| font-size: 10px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| text-align: center; | |
| font-size: 11px; | |
| background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099); | |
| border-top: 2px solid rgba(46, 56, 79, 0.85); | |
| z-index: 9999; | |
| } | |
| h2 { | |
| padding:15px; | |
| background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); | |
| background: linear-gradient(transparent 10%, #333 50%, transparent 90%); | |
| -webkit-animation: shadow 1s ease-in-out infinite; | |
| animation: shadow 1s ease-in-out infinite; | |
| } | |
| /*Text Bawah1*/ | |
| M-2010, #teks, #posisi, #dibawah, span { | |
| font: 900 15vw Raleway; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| #M-2010, #teks, #posisi, #dibawah { | |
| position: absolute; | |
| font-size: 11px; | |
| margin: 2px | |
| } | |
| #M-2010, #teks div { | |
| text-decoration: underline; | |
| cursor: pointer | |
| } | |
| #teks, #posisi { | |
| text-align: right; | |
| right: 50px; | |
| } | |
| #teks, #dibawah { | |
| text-align: left; | |
| left: 50px; | |
| } | |
| #dibawah, #posisi { | |
| bottom:38px; | |
| -webkit-animation: shadow 6s ease-in-out infinite; | |
| animation: shadow 6s ease-in-out infinite; | |
| } | |
| @keyframes shadow { | |
| 0% { | |
| text-shadow: 0 0 2px #B0E0E6 , | |
| 0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 , | |
| 0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 , | |
| 0 0 40px #B0E0E6, 0 0 50px #B0E0E6 , | |
| 0 0 80px #B0E0E6; | |
| } | |
| 50% { | |
| text-shadow: 0 12px 7px #CC0099, | |
| 0 5px 15px #CC0099, 0 0 50px #CC0099, | |
| 0 -10px 2px #CC0099; | |
| } | |
| 100% { | |
| text-shadow: 0 0 2px #800080 , | |
| 0 0 8px #800080 , 0 0 10px #800080 , | |
| 0 0 20px #800080 , 0 0 30px #800080 , | |
| 0 0 40px #800080 , 0 0 50px #800080 , | |
| 0 0 80px #800080 ; | |
| } | |
| } | |
| /*end*/ | |
| .shadow-atas:after { | |
| content: " "; | |
| box-shadow: 0 0 200px 90px #809FFE; | |
| } | |
| .shadow-atas:before { | |
| content: " "; | |
| box-shadow: 0 0 200px 110px #FF80FE; | |
| } | |
| #M2010-shadow-atas { | |
| margin:-110px; | |
| box-shadow: 0 0 150px 80px #f00; | |
| -webkit-box-shadow: 0px 1px 71px 25px #FF80FE; | |
| -moz-box-shadow: 0px 1px 71px 15px #f00; | |
| } | |
| .shadow-bawah:before,.shadow-bawah:after { | |
| z-index:-1; | |
| position:absolute; | |
| content: " "; | |
| bottom:25px; | |
| left:10px; | |
| width:50%; | |
| max-width:110px; | |
| box-shadow: 0 0 200px 110px #FF80FE; | |
| -webkit-transform:rotate(-8deg); | |
| -moz-transform:rotate(-8deg); | |
| -o-transform:rotate(-8deg); | |
| -ms-transform:rotate(-8deg); | |
| transform:rotate(-8deg); | |
| } | |
| .shadow-bawah:after { | |
| -webkit-transform:rotate(8deg); | |
| -moz-transform:rotate(8deg); | |
| -o-transform:rotate(8deg); | |
| -ms-transform:rotate(8deg); | |
| transform:rotate(8deg); | |
| right:10px; | |
| left:auto; | |
| } | |
| .Liplop { | |
| -webkit-animation: fade-in 0.2s linear infinite alternate; | |
| -moz-animation: fade-in 0.2s linear infinite alternate; | |
| animation: fade-in 0.2s linear infinite alternate; | |
| } | |
| @-moz-keyframes fade-in { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes fade-in { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fade-in { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| /*bingkai*/ | |
| body { | |
| position: absolute; | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #111; | |
| } | |
| #canvas { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 600px; | |
| height: 400px; | |
| margin-left: -300px; | |
| margin-top: -200px; | |
| background: rgba(200, 54, 54, 0.5); | |
| } | |
| #frame { | |
| position: absolute; | |
| left: 48%; | |
| top: 50%; | |
| width: 700px; | |
| height: 450px; | |
| margin-left: -320px; | |
| margin-top: -225px; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 100px 0px #f00; | |
| } | |
| /*bground Changed 2*/ | |
| body::before { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background: rgba(200, 54, 54, 0.5); | |
| -webkit-animation: overlay infinite 12s; | |
| animation: overlay infinite 12s; | |
| content: ''; | |
| } | |
| -webkit-animation: overlay infinite 12s; | |
| animation: overlay infinite 12s; | |
| content: ''; | |
| } | |
| @-webkit-keyframes transform { | |
| 0%, 16% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-50%) rotateX(-90deg); | |
| transform: translateY(-50%) rotateX(-90deg); | |
| } | |
| 18% { | |
| opacity: 1; | |
| } | |
| 40% { | |
| opacity: 1; | |
| -webkit-transform: translateY(-50%) rotateX(0deg); | |
| transform: translateY(-50%) rotateX(0deg); | |
| } | |
| } | |
| @keyframes transform { | |
| 0%, 16% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-50%) rotateX(-90deg); | |
| transform: translateY(-50%) rotateX(-90deg); | |
| } | |
| 18% { | |
| opacity: 1; | |
| } | |
| 40% { | |
| opacity: 1; | |
| -webkit-transform: translateY(-50%) rotateX(0deg); | |
| transform: translateY(-50%) rotateX(0deg); | |
| } | |
| } | |
| @-webkit-keyframes overlay { | |
| 0% { | |
| opacity: .5; | |
| } | |
| 18%, 81% { | |
| opacity: 0; | |
| } | |
| 92%, 100% { | |
| opacity: .5; | |
| } | |
| } | |
| @keyframes overlay { | |
| 0% { | |
| opacity: .5; | |
| } | |
| 18%, 81% { | |
| opacity: 0; | |
| } | |
| 92%, 100% { | |
| opacity: .5; | |
| } | |
| } | |
| @-webkit-keyframes opacity { | |
| 0%, 4% { | |
| opacity: 0; | |
| } | |
| 18%, 81% { | |
| opacity: 1; | |
| } | |
| 92%, 100% { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes opacity { | |
| 0%, 4% { | |
| opacity: 0; | |
| } | |
| 18%, 81% { | |
| opacity: 1; | |
| } | |
| 92%, 100% { | |
| opacity: 0; | |
| } | |
| } | |
| /*cat*/ | |
| .contenedor{ | |
| position:relative; | |
| width:100px; | |
| height:100px; | |
| left:-32px; | |
| margin: 350px; | |
| margin-top:-65px | |
| } | |
| .cat{ | |
| position:absolute; | |
| margin:0 -1px | |
| } | |
| .cara{ | |
| position:absolute; | |
| width: 172px; | |
| height: 162px; | |
| border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:125px 231px; | |
| -webkit-animation:sube 3s alternate infinite; | |
| animation:sube 3s alternate infinite; | |
| } | |
| .ojos { | |
| position:absolute; | |
| width:50px; | |
| height:50px; | |
| border-radius:100%; | |
| background:black; | |
| margin:70px 21px; | |
| -webkit-animation:cerrar 3s alternate infinite; | |
| animation:cerrar 3s alternate infinite; | |
| } | |
| .ojos3 { | |
| position:absolute; | |
| width:50px; | |
| height:50px; | |
| border-radius:100%; | |
| background:black; | |
| margin:70px 102px; | |
| -webkit-animation:cerrar 3s alternate infinite; | |
| animation:cerrar 3s alternate infinite; | |
| } | |
| .iris{ | |
| position:absolute; | |
| width:12px; | |
| height:12px; | |
| border-radius:100%; | |
| background:yellow; | |
| margin:12px 12px; | |
| -webkit-animation:shake .09s alternate infinite; | |
| animation:shake .09s alternate infinite; | |
| } | |
| .iris3{ | |
| position:absolute; | |
| width:12px; | |
| height:12px; | |
| border-radius:100%; | |
| background:yellow; | |
| margin:12px 25px; | |
| -webkit-animation:shake .09s alternate infinite; | |
| animation:shake .09s alternate infinite; | |
| } | |
| .ceja{ | |
| position:absolute; | |
| width:60px; | |
| height:35px; | |
| border-radius:100%; | |
| background:gray; | |
| margin:43px 7px; | |
| -webkit-transform:rotate(-33deg); | |
| transform:rotate(-33deg) | |
| } | |
| .ceja3{ | |
| position:absolute; | |
| width:60px; | |
| height:35px; | |
| border-radius:100%; | |
| background:gray; | |
| margin:43px 98px; | |
| -webkit-transform:rotate(33deg); | |
| transform:rotate(33deg) | |
| } | |
| .boca{ | |
| position:absolute; | |
| width:30px; | |
| height:21px; | |
| border-radius:100%; | |
| background: #333; | |
| margin:121px 72px; | |
| -webkit-animation:baja 3s alternate infinite; | |
| animation:baja 3s alternate infinite; | |
| } | |
| .hocico{ | |
| position:absolute; | |
| height: 0; | |
| border-left: 21px solid transparent; | |
| border-right: 21px solid transparent; | |
| border-bottom: 21px solid #121212; | |
| border-radius: 100px / 50px; | |
| margin:112px 65px; | |
| -webkit-animation:sube 3s alternate infinite; | |
| animation:sube 3s alternate infinite; | |
| } | |
| .hocico3{ | |
| position:absolute; | |
| width:35px; | |
| height:30px; | |
| border-radius:100%; | |
| border-right:3px solid black; | |
| background:#94948c; | |
| margin:123px 50px; | |
| -webkit-animation:sube 3s alternate infinite; | |
| animation:sube 3s alternate infinite; | |
| } | |
| .hocico3::before{ | |
| content:""; | |
| position:absolute; | |
| width:35px; | |
| height:30px; | |
| border-radius:100%; | |
| border-left:3px solid black; | |
| background:#94948c; | |
| margin:0px 35px | |
| } | |
| .orejas{ | |
| position:absolute; | |
| width:70px; | |
| height:90px; | |
| border-radius:500px 50px 500px 50px; | |
| background:#f00; | |
| border:6px solid gray; | |
| margin:95px 201px; | |
| -webkit-transform:rotate(-45deg); | |
| transform:rotate(-45deg); | |
| -webkit-animation:sube3 3s alternate infinite; | |
| animation:sube3 3s alternate infinite; | |
| } | |
| .orejas3{ | |
| position:absolute; | |
| width:70px; | |
| height:90px; | |
| border-radius:50px 500px 50px 500px; | |
| background:#f00; | |
| border:6px solid gray; | |
| margin:95px 350px; | |
| -webkit-transform:rotate(45deg); | |
| transform:rotate(45deg); | |
| -webkit-animation:sube3 3s alternate infinite; | |
| animation:sube3 3s alternate infinite; | |
| } | |
| .body{ | |
| position:absolute; | |
| width: 162px; | |
| height: 212px; | |
| border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
| background:gray; | |
| border:3px solid #888; | |
| margin:251px 231px; | |
| } | |
| .legs{ | |
| position:absolute; | |
| width:35px; | |
| height:132px; | |
| border-radius:21px; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:90px 7px; | |
| -webkit-transform:rotate(12deg); | |
| transform:rotate(12deg) | |
| } | |
| .legs::before{ | |
| content:""; | |
| position:absolute; | |
| width:35px; | |
| height:132px; | |
| border-radius:21px; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:-24px 102px; | |
| -webkit-transform:rotate(-24deg); | |
| transform:rotate(-24deg) | |
| } | |
| .legs3{ | |
| position:absolute; | |
| width:90px; | |
| height:75px; | |
| border-radius:70px 70px 0 0; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:360px 212px | |
| } | |
| .legs3::before{ | |
| content:""; | |
| display:block; | |
| width:121px; | |
| height:30px; | |
| border-radius:30px; | |
| background:gray; | |
| border-left:3px solid #777; | |
| border-bottom:3px solid #777; | |
| margin:70px -21px | |
| } | |
| .legs7{ | |
| position:absolute; | |
| width:90px; | |
| height:75px; | |
| border-radius:70px 70px 0 0; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:360px 321px | |
| } | |
| .legs7::before{ | |
| content:""; | |
| display:block; | |
| width:121px; | |
| height:30px; | |
| border-radius:30px; | |
| background:gray; | |
| border-right:3px solid #777; | |
| border-bottom:3px solid #777; | |
| margin:70px -21px | |
| } | |
| .legs9{ | |
| position:absolute; | |
| width:40px; | |
| height:21px; | |
| border-radius:12px; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:112px -5px; | |
| -webkit-transform:rotate(-12deg); | |
| transform:rotate(-12deg) | |
| } | |
| .legs9::before{ | |
| content:""; | |
| position:absolute; | |
| width:40px; | |
| height:21px; | |
| border-radius:12px; | |
| background:gray; | |
| border:3px solid #777; | |
| margin:0px 132px; | |
| } | |
| .bigotitos{ | |
| position:absolute; | |
| width:90px; | |
| height:30px; | |
| border-radius:100%; | |
| border-bottom:2px solid black; | |
| margin:107px -12px; | |
| -webkit-animation:sube 3s alternate infinite; | |
| animation:sube 3s alternate infinite; | |
| } | |
| .bigotitos::before{ | |
| content:""; | |
| position:absolute; | |
| width:70px; | |
| height:21px; | |
| border-radius:100%; | |
| border-bottom:2px solid black; | |
| margin:13px 7px; | |
| -webkit-transform: rotate(-12deg); | |
| transform: rotate(-12deg); | |
| } | |
| .bigotitos::after{ | |
| content:""; | |
| position:absolute; | |
| width:70px; | |
| height:21px; | |
| border-radius:100%; | |
| border-bottom:2px solid black; | |
| margin:18px 9px; | |
| -webkit-transform: rotate(-21deg); | |
| transform: rotate(-21deg); | |
| } | |
| .bigotitos3{ | |
| position:absolute; | |
| width:90px; | |
| height:30px; | |
| border-radius:100%; | |
| border-bottom:2px solid black; | |
| margin:107px 90px; | |
| -webkit-animation:sube 3s alternate infinite; | |
| animation:sube 3s alternate infinite; | |
| } | |
| .bigotitos3::before{ | |
| content:""; | |
| position:absolute; | |
| width:70px; | |
| height:21px; | |
| border-radius:100%; | |
| border-bottom:2px solid black; | |
| margin:12px 12px; | |
| -webkit-transform: rotate(12deg); | |
| transform: rotate(12deg); | |
| } | |
| .bigotitos3::after{ | |
| content:""; | |
| position:absolute; | |
| width:70px; | |
| height:21px; | |
| border-radius:100%; | |
| border-bottom:2px solid black; | |
| margin:16px 13px; | |
| -webkit-transform: rotate(25deg); | |
| transform: rotate(25deg); | |
| } | |
| .cola{ | |
| position:absolute; | |
| width:172px; | |
| height:121px; | |
| border-radius:100%; | |
| border-bottom:35px solid gray; | |
| margin:300px 360px; | |
| -webkit-animation:go 3s alternate infinite; | |
| animation:go 3s alternate infinite; | |
| } | |
| @-webkit-keyframes shake{ | |
| 0%{-webkit-transform:scale(1);transform:scale(1)} | |
| 50%{-webkit-transform:scale(.90);transform:scale(.90)} | |
| 75%{-webkit-transform:scale(1);transform:scale(1)} | |
| } | |
| @keyframes shake{ | |
| 0%{-webkit-transform:scale(1);transform:scale(1)} | |
| 50%{-webkit-transform:scale(.90);transform:scale(.90)} | |
| 75%{-webkit-transform:scale(1);transform:scale(1)} | |
| } | |
| @-webkit-keyframes sube { | |
| 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} | |
| 100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)} | |
| } | |
| @keyframes sube { | |
| 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} | |
| 100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)} | |
| } | |
| @-webkit-keyframes baja { | |
| 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} | |
| 100%{-webkit-transform:translatey(9px);transform:translatey(9px)} | |
| } | |
| @keyframes baja { | |
| 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} | |
| 100%{-webkit-transform:translatey(9px);transform:translatey(9px)} | |
| } | |
| @-webkit-keyframes go{ | |
| 0%{-webkit-transform:scale(1);transform:scale(1)} | |
| 50%{-webkit-transform:scale(.90);transform:scale(.90)} | |
| } | |
| @keyframes go{ | |
| 0%{-webkit-transform:scale(1);transform:scale(1)} | |
| 50%{-webkit-transform:scale(.90);transform:scale(.90)} | |
| } | |
| @-webkit-keyframes cerrar { | |
| 0%,25%{opacity:1} | |
| 35%{opacity: 0} | |
| 50%{opacity:1;} | |
| 100%{opacity:1} | |
| } | |
| @keyframes cerrar { | |
| 0%,25%{opacity:1} | |
| 35%{opacity: 0} | |
| 50%{opacity:1;} | |
| 100%{opacity:1} | |
| } | |
| @-webkit-keyframes sube3 { | |
| 0%{margin-top:95px} | |
| 100%{margin-top:85px ;} | |
| } | |
| @keyframes sube3 { | |
| 0%{margin-top:95px} | |
| 100%{margin-top:85px ;} | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="canvas"></canvas> | |
| <div id="frame"> | |
| </div> | |
| <div class="contenedor"> | |
| <div class="cat"> | |
| <div class="cola"> | |
| </div> | |
| <div class="legs3"> | |
| </div> | |
| <div class="legs7"> | |
| </div> | |
| <div class="body"> | |
| <div class="legs"> | |
| <div class="legs9"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="orejas"> | |
| </div> | |
| <div class="orejas3"> | |
| </div> | |
| <div class="cara"> | |
| <div class="ojos"> | |
| <div class="iris"> | |
| </div> | |
| </div> | |
| <div class="ojos3"> | |
| <div class="iris3"> | |
| </div> | |
| </div> | |
| <div class="ceja"> | |
| </div> | |
| <div class="ceja3"> | |
| </div> | |
| <div class="bigotitos"> | |
| </div> | |
| <div class="bigotitos3"> | |
| </div> | |
| <div class="boca"> | |
| </div> | |
| <div class="hocico3"> | |
| </div> | |
| <div class="hocico"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div align="center" style="margin-top:-400px"> | |
| <div id="M2010-shadow-atas"> | |
| </div> | |
| <div class="shadow-atas"> | |
| </div> | |
| <div class="shadow-bawah"> | |
| </div> | |
| <div align="center"> | |
| <div class="ap" id="ap"> | |
| <div align="center"> | |
| <div id="dibawah"> | |
| <span style="font-family:arial;font-size:11px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> M - 2010 </a> DOWNLOAD </a> | |
| </div> | |
| <div id="posisi"> | |
| <span style="font-family:arial;font-size:12px;color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010"target="_blank" title="Mari Belajar"><span style="color:#FFFF00;font-size:14px;"> © - 2017</a> CODEPEN </a> | |
| </div> | |
| <h2> | |
| <audio id="player" preload="auto"> | |
| <source src="https://sites.google.com/site/sulescroll/lagu/Watain-Opus-Diaboli-M2010s.mp3"> | |
| </source></h2> | |
| </a></div> | |
| </div> | |
| <header> | |
| <a href="http://sample-mys2010.blogspot.co.id/2017/04/cat-in-frames.html" target="_blank" title="Mari Belajar"> | |
| <h2><div class="Liplop"> | |
| <span style="color:#f00; font-size:10pt"> | |
| LET'S STUDY</a> </h2> | |
| </a> | |
| </div> | |
| </header> | |
| <music> | |
| <ul class="mys2010-list"> | |
| <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'> | |
| </script> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> | |
| </script> | |
| <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'> | |
| </script> | |
| <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"> | |
| </script> | |
| <script> | |
| $(function () { | |
| $('video,audio').mediaelementplayer({ | |
| success: function (mediaElement, domObject) { | |
| var audio_src = $('li.current').attr('data-url'); | |
| mediaElement.setSrc(audio_src); | |
| mediaElement.addEventListener('ended', function (e) { | |
| mys2010PlayNext(e.target); | |
| }, false); | |
| }, | |
| keyActions: [] | |
| }); | |
| $('.mys2010-list li').click(function () { | |
| $(this).addClass('current').siblings().removeClass('current'); | |
| var audio_src = $(this).attr('data-url'); | |
| $('audio#mys2010:first').each(function () { | |
| this.player.pause(); | |
| this.player.setSrc(audio_src); | |
| this.player.play(); | |
| }); | |
| }); | |
| }); | |
| function mys2010PlayNext(currentPlayer) { | |
| if ($('.mys2010-list li.current').length > 0) { | |
| var current_item = $('.mys2010-list li.current:first'); | |
| var audio_src = $(current_item).next().text(); | |
| $(current_item).next().addClass('current').siblings().removeClass('current'); | |
| console.log('if ' + audio_src); | |
| } else { | |
| var current_item = $('.mys2010-list li:first'); | |
| var audio_src = $(current_item).next().text(); | |
| $(current_item).next().addClass('current').siblings().removeClass('current'); | |
| console.log('elseif ' + audio_src); | |
| } | |
| if ($(current_item).is(':last-child')) { | |
| $(current_item).removeClass('current'); | |
| } else { | |
| currentPlayer.setSrc(audio_src); | |
| currentPlayer.play(); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment