<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
img{width:100%;}
.music{position:absolute; width:80px; height:100px; top:0%; left:0%; }
.music_btn{position:absolute; width:50%; bottom:0%; right:0%; z-index:99;}
.music_btntxt{position:absolute; bottom:12%; left:-60%; font-size:14px; opacity:0; color:#fff;}
.music_icon{position:absolute; top:0%; right:0%; width:50%; height:70%; overflow:hidden;}
.music_icon img{position:absolute;}
#bgaudio{width:100%; position:absolute;}
</style>
</head>
<body>
<div class="music">
<div class="music_btn"><img src="images/play.png" /></div>
<span class="music_btntxt">开启</span>
<div class="music_icon"></div>
<audio id="bgaudio" loop ></audio>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script>
//-----------------------播放音乐----------------------------------
var bl=true;
var audio = document.getElementById("bgaudio");
playMusic('bg.mp3');
function playMusic(musicSrc){
audio = document.getElementById("bgaudio");
audio.src = musicSrc;
audio.play();
}
//-----------------------文字效果----------------------------------
$(".music_btn").click(function(){
if(bl){
bl=false;
audio.pause();
clearInterval(createIconInterval);
clearInterval(rotateInterval);
$(".music_btn img").rotate(0);
$(".music_btntxt").text("关闭").stop(true).animate({left:"5%",opacity:100},500).delay(1000).animate({left:"-50%",opacity:0},500);
angle=0;
}else{
bl=true;
audio.play();
rotateInterval=setInterval(rotate,10);
createIconInterval=setInterval(createIcon,500);
$(".music_btntxt").text("开启").stop(true).animate({left:"5%",opacity:100},500).delay(1000).animate({left:"-50%",opacity:0},500);
}
});
//--------------------按钮旋转和弹出小音符-----------------------------------------
var angle = 0;
var rotateInterval=setInterval(rotate,10);
var createIconInterval=setInterval(createIcon,500);
function rotate(){
angle+=1;
$(".music_btn img").rotate(angle);
}
function createIcon(){
var rangW=randomInRange(10,30);
var rangBeginLeft=randomInRange(0,100);
var rangFinishLeft=randomInRange(0,100);
var rangFinisBottom=randomInRange(60,80);
var rangRotat=randomInRange(-90,90);
var rangDuring=randomInRange(1,2)*1000;
var image= new Image();
image.src="images/play2.png";
$(".music_icon").append(image);
$(image).width(rangW+"%").css("left",rangBeginLeft+"%").css('bottom','-10%').rotate(rangRotat);
$(image).animate({
bottom:rangFinisBottom+"%",
left:rangFinishLeft+"%",
opacity:0
},rangDuring,function(){$(this).remove()});
}
//-----------------------------------------------------------------------------
function randomInRange(min, max) {
var random = Math.random() * (max - min) + min;
//Math.random() 返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1)
return random;
}
</script>
没有合适的资源?快使用搜索试试~ 我知道了~
kk梦空间中国水墨风格的手机滑动翻页专题动画模板.zip
共23个文件
png:10个
js:7个
html:2个
0 下载量 89 浏览量
2024-04-08
09:22:30
上传
评论
收藏 4.02MB ZIP 举报
温馨提示
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
【kk梦空间】中国水墨风格的手机滑动翻页专题动画模板.zip (23个子文件)
guanting111
musicPage.html 3KB
image
p1img1a.png 5KB
p3img7.png 78KB
p2img7.png 44KB
nbtn.png 1KB
p1bg.jpg 180KB
p4img7.png 123KB
p6img1.jpg 83KB
pbtn.png 1KB
p1img1.png 252KB
screen.png 1KB
js
WinSize.js 374B
addListenerWinSize.js 509B
jquery.touchSwipe.min.js 6KB
TweenMax.min.js 96KB
jquery-1.11.1.min.js 94KB
index.js 9KB
jquery.rotate.min.js 7KB
css
index.css 10KB
bg.mp3 3.38MB
index.html 2KB
images
play2.png 3KB
play.png 4KB
共 23 条
- 1
资源评论
小肥羊k
- 粉丝: 1297
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功