Share an example of using JavaScript to create a WeChat music album
This article mainly shares the WeChat music album case of js WeChat application scenario. It has certain reference value. Interested friends can refer to it.
This demo is just a js WeChat music album The general idea of the case, the specifics need to be carried out according to the situation
<!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>The above is the detailed content of Share an example of using JavaScript to create a WeChat music album. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
Bose Soundbar Ultra launch experience: Home theater right out of the box?
Feb 06, 2024 pm 05:30 PM
For as long as I can remember, I have had a pair of large floor-standing speakers at home. I have always believed that a TV can only be called a TV if it is equipped with a complete sound system. But when I first started working, I couldn’t afford professional home audio. After inquiring and understanding the product positioning, I found that the sound bar category is very suitable for me. It meets my needs in terms of sound quality, size and price. Therefore, I decided to go with the soundbar. After careful selection, I selected this panoramic soundbar product launched by Bose in early 2024: Bose home entertainment speaker Ultra. (Photo source: Photographed by Lei Technology) Generally speaking, if we want to experience the "original" Dolby Atmos effect, we need to install a measured and calibrated surround sound + ceiling at home.
Audacity now gets AI audio editing capabilities with Intel OpenVINO plug-in
Feb 15, 2024 am 11:06 AM
Audacity is a free and open source cross-platform audio editing software. It has an open code and plug-in contribution mechanism, and anyone can participate. In addition, Intel offers a free set of OpenVINOAI plug-ins designed for music editors and podcast producers. This website noticed that the plug-in package is about 2GB in size and can be downloaded on Intel's GitHub page. It also requires the 64-bit Windows version of Audacity to run. The most intuitive thing about this AI plug-in is that it brings three advanced tools to the Audacity music editing function: The first is the "music generation" function. Users can use text to describe the music they want, and AI will generate music clips within 60 seconds to facilitate advertising. and film music
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Choosing the right tablet for music students
Jan 10, 2024 pm 10:09 PM
Which tablet is suitable for musicians? The 12.9-inch speaker in Huawei’s iPad is a very good product. It comes with four speakers and the sound is excellent. Moreover, it belongs to the pro series, which is slightly better than other styles. Overall, ipad pro is a very good product. The speaker of this mini4 mobile phone is small and the effect is average. It cannot be used to play music externally, you still need to rely on headphones to enjoy music. Headphones with good sound quality will have a slightly better effect, but cheap headphones worth thirty or forty yuan cannot meet the requirements. What tablet should I use for electronic piano music? If you want to buy an iPad larger than 10 inches, I recommend using two applications, namely Henle and Piascore. Provided by Henle
How to add local music to soda music
Feb 23, 2024 pm 07:13 PM
How to add local music to Soda Music? You can add your favorite local music to Soda Music APP, but most friends don’t know how to add local music. Next is the graphic tutorial on how to add local music to Soda Music brought by the editor. , interested users come and take a look! Tutorial on using soda music. How to add local music to soda music. 1. First open the soda music APP and click on the [Music] function area at the bottom of the main page; 2. Then enter the play page and click the [three dots] icon in the lower right corner; 3. Finally Expand the function bar below and select the [Download] button to add it to local music.
Detailed steps to view your favorite music on Douyin
Mar 26, 2024 pm 06:20 PM
1. Click [+]. 2. Click [Select Music] above. 3. Click [My Favorites]. Method 2: 1. Open Douyin and click [Me]. 2. Click [Collect] next to the avatar. 3. Click [Music]
How to play music on WeChat
Feb 23, 2024 pm 09:28 PM
How to play music on WeChat? You can play your favorite music on WeChat APP, but most friends don’t know how to play their favorite music on WeChat. Next is the graphic tutorial on how to play music on WeChat brought by the editor. Interested users come and take a look! WeChat usage tutorial: How to play music on WeChat 1. First open the WeChat APP, slide down from the top to enter the mini program page; 2. Then click [Music] as shown by the arrow in the picture below; 3. Then in the interface as shown below, enter the search box Enter your favorite song title; 4. Finally, select the corresponding song title and click to play the song.
How to add music to photos on Douyin app How to add music to photos on Douyin app
Mar 12, 2024 pm 03:10 PM
How to add music to photos on Douyin app? Douyin app is a mobile phone software that allows you to share your daily life. There are many useful functions on this software. Among them, users’ favorite function is the function that allows them to share their daily life. In this function, users can We can add background music to the pictures we want. We can also add some filters to our pictures or adjust some parameters. Many users still don’t know how to add music to photos. Below, the editor has compiled methods for adding background music to photos. For everyone’s reference. How to add music to photos in Douyin app 1. Open the [Douyin] app and click [+] in the middle 2. After entering the video shooting interface, click [Upload] in the lower right corner 3. In the upload interface we need
