<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link type="text/css" href="./css/style1.css" rel="stylesheet" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
</head>
<body>
<div class="m-main">
<div class="player">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">
<img src="./img-one/开始.png" alt="" id="img1"/>
</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
<img src="./img-one/暂停.png" alt="" id="img2"/>
</a>
<div class="play-box">
<div class="left">
<p class="timeline"><span style=""></span></p>
<div class="info">
<span class="size">00:00</span>
<span class="timeshow">00:00</span>
</div>
</div>
</div>
</div>
<div class="video">
<video controls autoplay name="media" id="js-video"><source src="./mp3/白月光与朱砂痣.mp3" type="video/mp4"></video>
</div>
</div>
</div>
<div id="jsi-cherry-container" class="container">
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script>
$(function () {
AudioControl('js-video');
function AudioControl(id) {
// 音频控制进度条
console.log(777);
var audio = document.getElementById(id);
$(audio).on('loadedmetadata', function () {
audio.pause();
// 进度条控制
$(document).on('touchend', '.timeline', function (e) {
var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
var X = x < 0 ? 0 : x;
var W = $(this).width();
var place = X > W ? W : X;
audio.currentTime = (place / W).toFixed(2) * audio.duration;
$(this).children().css({
width: (place / W).toFixed(2) * 100 + "%"
})
});
// 播放
$(document).on('click', '#js-play', function () {
audio.play()
$('#img1').css("display","none");
$('#img2').css("display","block");
});
// 暂停
$(document).on('click', '#js-pause', function () {
audio.pause()
$('#img1').css("display","block");
$('#img2').css("display","none");
});
});
setInterval(function () {
var currentTime = audio.currentTime;
setTimeShow(currentTime);
}, 1000);
// 设置播放时间
function setTimeShow(t) {
t = Math.floor(t);
var playTime = secondToMin(audio.currentTime);
$(".size").html(playTime);
$('.timeshow').text(secondToMin(audio.duration));
$('.timeline').children().css({
width: (t / audio.duration).toFixed(4) * 100 + "%"
})
}
// 计算时间
function secondToMin(s) {
var MM = Math.floor(s / 60);
var SS = s % 60;
if (MM < 10)
MM = "0" + MM;
if (SS < 10)
SS = "0" + SS;
var min = MM + ":" + SS;
return min.split('.')[0];
}
}
})
var RENDERER = {
INIT_CHERRY_BLOSSOM_COUNT: 30,
MAX_ADDING_INTERVAL: 10,
init: function () {
this.setParameters();
this.reconstructMethods();
this.createCherries();
this.render();
if (
navigator.userAgent.match(
/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
var box = document.querySelectorAll('.box')[0];
console.log(box, '移动端');
box.style.marginTop = '65%';
}
},
setParameters: function () {
this.$container = $('#jsi-cherry-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $('<canvas />')
.attr({
width: this.width,
height: this.height
})
.appendTo(this.$container)
.get(0)
.getContext('2d');
this.cherries = [];
this.maxAddingInterval = Math.round(
(this.MAX_ADDING_INTERVAL * 1000) / this.width
);
this.addingInterval = this.maxAddingInterval;
},
reconstructMethods: function () {
this.render = this.render.bind(this);
},
createCherries: function () {
for (
var i = 0,
length = Math.round(
(this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
); i < length; i++
) {
this.cherries.push(new CHERRY_BLOSSOM(this, true));
}
},
render: function () {
requestAnimationFrame(this.render);
this.context.clearRect(0, 0, this.width, this.height);
this.cherries.sort(function (cherry1, cherry2) {
return cherry1.z - cherry2.z;
});
for (var i = this.cherries.length - 1; i >= 0; i--) {
if (!this.cherries[i].render(this.context)) {
this.cherries.splice(i, 1);
}
}
if (--this.addingInterval == 0) {
this.addingInterval = this.maxAddingInterval;
this.cherries.push(new CHERRY_BLOSSOM(this, false));
}
}
};
var CHERRY_BLOSSOM = function (renderer, isRandom) {
this.renderer = renderer;
this.init(isRandom);
};
CHERRY_BLOSSOM.prototype = {
FOCUS_POSITION: 300,
FAR_LIMIT: 600,
MAX_RIPPLE_COUNT: 100,
RIPPLE_RADIUS: 100,
SURFACE_RATE: 0.5,
SINK_OFFSET: 20,
init: function (isRandom) {
this.x = this.getRandomValue(
-this.renderer.width,
this.renderer.width
);
this.y = isRandom ?
this.getRandomValue(0, this.renderer.height) :
炫酷旋转魔方表白.zip （19个子文件） 
炫酷旋转魔方表白 img-one 
02.jpg 60KB
暂停.png 2KB 2.jpg 60KB 06.jpg 2.98MB 开始.png 1KB 01.jpg 3.96MB 6.jpg 2.98MB 1.jpg 3.96MB 5.jpg 4.19MB 05.jpg 4.19MB 04.jpg 2.9MB 3.jpg 822KB 03.jpg 822KB 4.jpg 2.9MB css 
style1.css 7KB style2.css 7KB mp3 沉醉的青丝.mp3 1.76MB 白月光与朱砂痣.mp3 1.56MB
index1.html 17KB资源评论
