分享使用JavaScript制作微信音乐相册实例
这篇文章主要为大家分享了js微信应用场景之微信音乐相册案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这个demo只是一个js微信音乐相册案例大概思路，具体还需要根据情况来进行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css" rel="external nofollow" >
<link rel="stylesheet" href="swiper.min.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
<style>
html,body{
width:100%;
height:100%;
overflow:hidden;
}
html{
font-size:100px;/*设计稿640*960*/
}
.main,.swiper-container,.swiper-slide{
width:100%;
height:100%;
overflow:hidden;
}
.page1{
position:relative;
background:url("../img/swiper/bg1.jpg") no-repeat;
background-size:cover;
}
.page1 img{
position:absolute;
opacity:0;
}
.page1 img:nth-child(1){
left:2rem;
top:.28rem;
width:.96rem;
height:2.32rem;
}
.page1 img:nth-child(2){
right:0;
top:.28rem;
width:3.7rem;
height:6rem;
}
.page1 img:nth-child(3){
left:.5rem;
bottom:.8rem;
width:5.5rem;
height:5.12rem;
}
.page1 img:nth-child(4){
left:-1.6rem;
bottom:0;
width:7.86rem;
height:5.88rem;
}
/*实现切换完成后页面中的元素在开始运动的思想:开始的时候当前的这个区域没有对应的ID，当切换到这个区域的时候，我们为其增加ID，在css中我们把所有的动画效果都放在指定的ID下，这样的话只需要让区域有ID，里面的子元素就有动画了*/
#page1 img:nth-child(1){
/*注意移动端的样式写两套 并且不加webkit的在后*/
-webkit-animation:bounceInLeft 1s linear 0s 1 both;
animation:bounceInLeft 1s linear 0s 1 both;
}
#page1 img:nth-child(2){
/*注意移动端的样式写两套 并且不加webkit的在后*/
-webkit-animation:bounceInRight 1s linear .3s 1 both;
animation:bounceInRight 1s linear .3s 1 both;
}
#page1 img:nth-child(3){
/*注意移动端的样式写两套 并且不加webkit的在后*/
-webkit-animation:bounceInUp 1s linear .6s 1 both;
animation:bounceInUp 1s linear .6s 1 both;
}
#page1 img:nth-child(4){
/*注意移动端的样式写两套 并且不加webkit的在后*/
-webkit-animation:bounceInUp 1s linear .9s 1 both;
animation:bounceInUp 1s linear .9s 1 both;
}
.page2{
position:relative;
background:url("../img/swiper/bg2.jpg") no-repeat;
background-size:cover;
}
.page2 img{
position:absolute;
top:2.5rem;
opacity:0;
}
.page2 img:nth-child(1){
top:0;
left:0;
width:3.4rem;
height:1.74rem;
}
.page2 img:nth-child(2){
left:1.48rem;
}
.page2 img:nth-child(3){
left:3.2rem;
}
.page2 img:nth-child(4){
left:4.7rem;
}
#page2 img:nth-child(1){
-webkit-animation:bounceInLeft 1s linear 0s 1 both;
animation:bounceInLeft 1s linear 0s 1 both;
}
#page2 img:nth-child(2){
-webkit-animation:zoomIn 1s linear .3s 1 both;
animation:zoomIn 1s linear .3s 1 both;
}
#page2 img:nth-child(3){
-webkit-animation:zoomIn 1s linear .6s 1 both;
animation:zoomIn 1s linear .6s 1 both;
}
#page2 img:nth-child(4){
-webkit-animation:zoomIn 1s linear .9s 1 both;
animation:zoomIn 1s linear .9s 1 both;
}
.arrow{
position:absolute;
left:50%;
bottom:.2rem;
z-index:10;
margin-left:-.24rem;
width:.48rem;
height:.36rem;
background:url("../img/swiper/web-swipe-tip.png") no-repeat;
background-size:100% 100%;
-webkit-animation:bounce 1s linear 0s infinite both;
animation:bounce 1s linear 0s infinite both;
}
.music{
display:none;
position:absolute;
top:.2rem;
right:.2rem;
z-index:10;
width:.6rem;
height:.6rem;
background:url("../audio/music.svg") no-repeat;
background-size:100% 100%;
}
.music.move{
-webkit-animation :musicMove 1s linear 0s infinite both;
animation :musicMove 1s linear 0s infinite both;
}
.music audio{
display:none;
}
@-webkit-keyframes musicMove{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes musicMove{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<section class='main'>
<!--MUSIC-->
<p class='music' id='musicMenu'>
<audio src="beyond.mp3" preload = 'none' loop autoplay></audio id='musicAudio'>
<!-- <audio>
<source src='beyond.mp3' type='audio/mpeg'/>
<source src='beyond.wav' type='audio/wav'/>
<source src='beyond.ogg' type='audio/ogg'/>
</audio> -->
</p>
<!--CONTAINER-->
<p class='swiper-container'>
<p class='swiper-wrapper'>
<p class='swiper-slide page1'>
<img src="img/swiper/page1-text1.png" alt="">
<img src="img/swiper/page1-text2.png" alt="">
<img src="img/swiper/page1-text3.png" alt="">
<img src="img/swiper/page1-text4.png" alt="">
</p>
<p class='swiper-slide page2'>
<img src="img/swiper/page2-text1.png" alt="">
<img src="img/swiper/page2-text2.png" alt="">
<img src="img/swiper/page2-text3.png" alt="">
<img src="img/swiper/page2-text4.png" alt="">
</p>
</p>
</p>
<!--ARROW-->
<p class='arrow'></p>
</section>
<script charset='utf-8' src='swiper.min.js'></script>
<script>
//rem
~function(){
var desW = 640,
winW = document.documentElement.clientWidth,
ratio = winW / desW,
oMain = document.querySelector(".main");
if(winW>desW){
oMain.style.margin = "0 auto";
oMain.style.width = desW + 'px';
return;
}
document.documentElement.style.fontSize = ratio*100+"px";
}()
new Swiper('.swiper-container',{
direction:"vertical",
loop:true,
/*当切换结束后，给当前展示的区域添加对应的ID，由此实现对应的动画效果*/
onSlideChangeEnd:function(swiper){
var slideAry = swiper.slides;//获取当前一共有多少个活动快（包含loop模式前后多加的两个）
var curIn = swiper.activeIndex;//当前展示的这个区域的索引
var total = slideAry.length;
//计算ID是PAGE?
var targetId = 'page';
switch(curIn){
case 0:
targetId += total - 2;
break;
case total - 1:
targetId += 1;
break;
default:
targetId += curIn
}
//给当前的活动块设置ID即可,还要把其余的移除
[].forEach.call(slideAry,function(item,index){
if(curIn === index){
item.id = targetId;
return;
}
item.id = null;
})
slideAry[curIn].id = targetId;
//最后把animate.css里面的动画to里面添加opacity:1
}
})
//MUSIC
~function(){
var musicMenu = document.getElementById('musicMenu'),
musicAudio = document.getElementById('musicAudio');
musicMenu.addEventListener('click',function(){
if(musicAudio.paused){
musicAudio.play();
musicMenu.className = "music move";
return;
}
musicAudio.pause();
musicMenu.className = "music";
})
function controlMusic(){
musicAudio.volume = 0.1;
musicAudio.play();
musicAudio.addEventListener('canplay',function(){
musicMenu.style.display = "block";
musicMenu.className = "music move";
})
}
window.setTimeout(controlMusic,1000)
}()
</script>
</body>
</html>Atas ialah kandungan terperinci 分享使用JavaScript制作微信音乐相册实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Pengalaman pelancaran Bose Soundbar Ultra: Teater rumah terus dari kotak?
Feb 06, 2024 pm 05:30 PM
Sepanjang yang saya ingat, saya mempunyai sepasang pembesar suara yang berdiri di lantai di rumah Saya sentiasa percaya bahawa TV hanya boleh dipanggil TV jika ia dilengkapi dengan sistem bunyi yang lengkap. Tetapi apabila saya mula bekerja, saya tidak mampu membeli audio rumah profesional. Selepas bertanya dan memahami kedudukan produk, saya dapati kategori bar bunyi sangat sesuai untuk saya ia memenuhi keperluan saya dari segi kualiti bunyi, saiz dan harga. Oleh itu, saya memutuskan untuk menggunakan bar bunyi. Selepas pemilihan yang teliti, saya memilih produk bar bunyi panoramik yang dilancarkan oleh Bose pada awal 2024: Pembesar suara hiburan rumah Bose Ultra. (Sumber foto: Difoto oleh Lei Technology) Secara umumnya, jika kita ingin mengalami kesan Dolby Atmos "asal", kita perlu memasang bunyi sekeliling + siling yang diukur dan ditentukur di rumah.
Audacity kini mendapat keupayaan penyuntingan audio AI dengan pemalam Intel OpenVINO
Feb 15, 2024 am 11:06 AM
Audacity ialah perisian penyuntingan audio merentas platform sumber terbuka dan percuma. Ia mempunyai kod terbuka dan mekanisme sumbangan pemalam, dan sesiapa sahaja boleh mengambil bahagian. Selain itu, Intel menawarkan set percuma pemalam OpenVINOAI yang direka untuk editor muzik dan pengeluar podcast. Laman web ini mendapati bahawa pakej pemalam adalah kira-kira 2GB dalam saiz dan boleh dimuat turun pada halaman GitHub Intel Ia juga memerlukan versi Windows 64-bit Audacity untuk dijalankan. Perkara yang paling intuitif tentang pemalam AI ini ialah ia membawa tiga alat lanjutan kepada fungsi penyuntingan muzik Audacity: Yang pertama ialah fungsi "Generasi Muzik" Pengguna boleh menggunakan teks untuk menerangkan muzik yang mereka inginkan, dan AI akan menjana muzik klip dalam masa 60 saat untuk memudahkan pengiklanan dan muzik filem
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Bagaimana untuk menambah muzik tempatan pada muzik soda
Feb 23, 2024 pm 07:13 PM
Bagaimana untuk menambah muzik tempatan ke Muzik Soda? Anda boleh menambah muzik tempatan kegemaran anda ke APP Muzik Soda, tetapi kebanyakan rakan tidak tahu cara menambah muzik tempatan Seterusnya ialah tutorial grafik tentang cara menambah muzik tempatan yang dibawa oleh editor, pengguna yang berminat datang dan lihat! Tutorial menggunakan muzik soda Cara menambah muzik tempatan ke muzik soda 1. Mula-mula buka APP muzik soda dan klik pada kawasan fungsi [Muzik] di bahagian bawah halaman utama ikon [tiga titik] di sudut kanan bawah 3. Akhir sekali Kembangkan bar fungsi di bawah dan pilih butang [Muat Turun] untuk menambahkannya ke muzik tempatan.
Memilih tablet yang sesuai untuk pelajar muzik
Jan 10, 2024 pm 10:09 PM
Tablet manakah yang sesuai untuk pemuzik? Pembesar suara 12.9 inci dalam iPad Huawei adalah produk yang sangat baik. Ia datang dengan empat pembesar suara dan kualiti bunyi yang sangat baik. Selain itu, ia tergolong dalam siri pro, yang lebih baik sedikit daripada gaya lain. Secara keseluruhan, iPad Pro ialah produk yang sangat baik. Pembesar suara telefon bimbit mini4 ini kecil dan kesannya sederhana. Ia tidak boleh digunakan untuk memainkan muzik secara luaran, anda masih perlu bergantung pada fon kepala untuk menikmati muzik. Fon kepala dengan kualiti bunyi yang baik akan mempunyai kesan yang lebih baik sedikit, tetapi fon kepala murah bernilai tiga puluh atau empat puluh yuan tidak dapat memenuhi keperluan. Apakah tablet yang perlu saya gunakan untuk muzik piano elektronik. Jika anda ingin membeli iPad yang lebih besar daripada 10 inci, saya mengesyorkan menggunakan dua aplikasi, iaitu Henle dan Piascore. Disediakan oleh Henle
Cara memainkan muzik di WeChat
Feb 23, 2024 pm 09:28 PM
Bagaimana untuk memainkan muzik di WeChat? Anda boleh memainkan muzik kegemaran anda pada APP WeChat, tetapi kebanyakan rakan tidak tahu cara memainkan muzik kegemaran mereka di WeChat Seterusnya ialah tutorial grafik tentang cara memainkan muzik di WeChat yang dibawa oleh editor. Pengguna yang berminat datang dan lihat! Tutorial penggunaan WeChat: Cara memainkan muzik di WeChat 1. Mula-mula buka APP WeChat, luncurkan ke bawah dari atas untuk masuk ke halaman program mini 2. Kemudian klik [Muzik] seperti yang ditunjukkan oleh anak panah dalam gambar di bawah; dalam antara muka seperti yang ditunjukkan di bawah, masukkan kotak carian Masukkan tajuk lagu kegemaran anda 4. Akhir sekali, pilih tajuk lagu yang sepadan dan klik untuk memainkan lagu.
Langkah terperinci untuk melihat muzik kegemaran anda di Douyin
Mar 26, 2024 pm 06:20 PM
1. Klik [+]. 2. Klik [Pilih Muzik] di atas. 3. Klik [Kegemaran Saya]. Kaedah 2: 1. Buka Douyin dan klik [Saya]. 2. Klik [Kumpul] di sebelah avatar. 3. Klik [Muzik]
Tutorial penggunaan muzik soda
Feb 23, 2024 pm 03:37 PM
Terdapat banyak alat praktikal dalam APP Muzik Soda, tetapi kebanyakan rakan tidak tahu cara menggunakan alatan dalam Muzik Soda Tutorial tentang cara menggunakan alatan tersebut akan dikemas kini secara berterusan di bawah . Ringkasan tutorial tentang cara menggunakan fungsi tersebut boleh datang dan lihat! Tutorial penggunaan muzik soda [2024-01-29] Cara memuat turun muzik soda ke pemacu kilat USB [2024-01-29] Cara menetapkan nada dering telefon bimbit dengan muzik soda [2024-01-29] Cara menghantar muzik soda ke TV [2024-01- 29] Cara menyediakan main balik muzik soda tanpa gangguan [2024-01-29] Cara mematikan pembaharuan automatik muzik soda [2024-01-29] Tempat untuk mengimbas soda muzik
