<!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
版权申诉
86 浏览量
2024-04-21
00:55:49
上传
评论
收藏 4.02MB ZIP 举报
【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资源评论
