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-->
<div 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> -->
</div>
<!--CONTAINER-->
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div 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="">
</div>
<div 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="">
</div>
</div>
</div>
<!--ARROW-->
<div class='arrow'></div>
</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
本文实例讲述了PHP实现微信JS-SDK接口选择相册及拍照并上传的方法.分享给大家供大家参考,具体如下: 理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果图: 通过微信js接口,调用底层程序. 需要引入js文件,并进行配置. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> wx.c
-
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览网络图片http链接的 2.预览本地图片wenxin:// 链接的 一.预览图片接口 注: 1.预览图片接口目前只支持微信手机版 2.预览图片只支持http连接,对于weixin:// 无法预览 3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI(
-
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, maxi
-
Three.js 再探 - 写一个微信跳一跳极简版游戏
那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧 源码地址: github.com/luosijie/th- 由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好 下面是实现过程 游戏分析 首先分析一下一个这样的游戏需要什么元素 Three.js必备元素: 场景,灯光,摄像机 一块又一块的方块 会跳的那个 ,或者叫游戏者 以上 游戏过程 初始一个场景, 场景中有一个 会跳的那个 和 2个方块 鼠标按下储存 能量值 鼠标放
-
微信小程序 拍照或从相册选取图片上传代码实例
这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 upload.wxml <!--pages/upload/upload.wxml--> <button bindtap='uploadPhoto'>拍照选取照片上传</button> upload.js // pages/upload/upload.js Page({ data: { imgData: [] }
-
vue调用微信JSDK 扫一扫，相册等需要注意的事项
在VUE里面需要注意的第一个问题就是路由得设置成 第二个就是 跳转路由的时候 不要用this.$router.push 或者this.$router.replace 前者在ios 和安卓端都调不起来的 后者只能在安卓端有效 在ios端无效 this.$router.push的效果图 测试工具上是可以调起,然后在安卓手机上和ios上这个是调不起的 这个在测试上椰是可以的,然后在安卓端上可以,在ios上会出现无效的token 40029 config:function(res){ //配置JSSD
-
微信小程序实现拍照和相册选取图片
本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下 布局: <!--pages/camera/camera.wxml--> <view class="tui-menu-list" id="view1" style="display:flex;flex-direction:space-between"> <button id="b1" size="mi
-
巧用Vue.js+Vuex制作专门收藏微信公众号的app
本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev // run in dev mode cd backend-serv
-
JS如何设置iOS中微信浏览器的title
说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题: 微信导航栏的内容是直接拿的项目中title来设置的.但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title.开始我们使用的做法如下: document.title = "微信导航栏想要显示的内容"; $("title").text("微信导航栏想要显示的内容"); document.getEleme
-
JS中静态页面实现微信分享功能
微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.我使用phpcms把页面生成了静态文件,示例代码就起不到作用了.在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家. 前台代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> url=locatio
-
JS简单判断是否在微信浏览器打开的方法示例
本文实例讲述了JS简单判断是否在微信浏览器打开的方法.分享给大家供大家参考,具体如下: 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以做得
-
微信小程序实现保存图片到相册功能
项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题.废话不多说,直接上干货... 功能逻辑: 先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权. 上代码: <view bindtap='save'>保存图片到相册</view> //点击保存图片 save () { let