【表白程序】樱花雨3d相册代码

我挥舞着键盘和本子，发誓要把世界写个明明白白。

简介

今天带来的是照片墙，希望大家喜欢！

利用所学知识给他/她一个惊喜，是作为计算机专业的你最大的乐趣。

如果你是非计算机专业的，也没关系，跟着如下步骤来你也将成为酷酷的程序员！

操作步骤：

新建文件夹，vscode打开（代码目录）

建立index.html文件（写代码）

完整代码如下（重点）

安装插件live server(运行代码)

使用插件运行程序

哦！是我多心了吧！为何在下如此话多。

注意：预先步骤已下载vscode代码编译器,关注微信公众号「先取个名字吧」有vscode安装包以及安装步骤哦！回复 vscode 即可获取

以下为本期内容｜关注微信公众号「先取个名字吧」

新建文件夹，vscode打开

建立index.html文件

完整代码获取如下

关注微信公众号「先取个名字吧」回复玫瑰即可获取完整代码

<!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) :this.renderer.height * 1.5;this.z = this.getRandomValue(0, this.FAR_LIMIT);this.vx = this.getRandomValue(-2, 2);this.vy = -2;this.theta = this.getRandomValue(0, Math.PI * 2);this.phi = this.getRandomValue(0, Math.PI * 2);this.psi = 0;this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);this.opacity = 0;this.endTheta = false;this.endPhi = false;this.rippleCount = 0;var axis = this.getAxis(),theta =this.theta +(Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) *Math.PI) /500;theta %= Math.PI * 2;this.offsetY =40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);this.thresholdY =this.renderer.height / 2 +this.renderer.height * this.SURFACE_RATE * axis.rate;this.entityColor = this.renderer.context.createRadialGradient(0,40,0,0,40,80);this.entityColor.addColorStop(0,'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(0.05,'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(1,'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');this.shadowColor = this.renderer.context.createRadialGradient(0,40,0,0,40,80);this.shadowColor.addColorStop(0,'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(0.05,'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(1,'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');},getRandomValue: function (min, max) {return min + (max - min) * Math.random();},getAxis: function () {var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return {rate: rate,x: x,y: y};},renderCherry: function (context, axis) {context.beginPath();context.moveTo(0, 40);context.bezierCurveTo(-60, 20, -10, -60, 0, -20);context.bezierCurveTo(10, -60, 60, 20, 0, 40);context.fill();for (var i = -4; i < 4; i++) {context.beginPath();context.moveTo(0, 40);context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);context.stroke();}},render: function (context) {var axis = this.getAxis();if (axis.y == this.thresholdY &&this.rippleCount < this.MAX_RIPPLE_COUNT) {context.save();context.lineWidth = 2;context.strokeStyle ='hsla(0, 0%, 100%, ' +(this.MAX_RIPPLE_COUNT - this.rippleCount) /this.MAX_RIPPLE_COUNT +')';context.translate(axis.x +this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1),axis.y);context.scale(1, 0.3);context.beginPath();context.arc(0,0,(this.rippleCount / this.MAX_RIPPLE_COUNT) *this.RIPPLE_RADIUS *axis.rate,0,Math.PI * 2,false);context.stroke();context.restore();this.rippleCount++;}if (axis.y < this.thresholdY || !this.endTheta || !this.endPhi) {if (this.y <= 0) {this.opacity = Math.min(this.opacity + 0.01, 1);}context.save();context.globalAlpha = this.opacity;context.fillStyle = this.shadowColor;context.strokeStyle ='hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';context.translate(axis.x,Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));context.rotate(Math.PI - this.theta);context.scale(axis.rate * -Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();}context.save();context.fillStyle = this.entityColor;context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';context.translate(axis.x,axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));context.rotate(this.theta);context.scale(axis.rate * Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();if (this.y <= -this.renderer.height / 4) {if (!this.endTheta) {for (var theta = Math.PI / 2, end = (Math.PI * 3) / 2; theta <= end; theta += Math.PI) {if (this.theta < theta && this.theta + Math.PI / 200 > theta) {this.theta = theta;this.endTheta = true;break;}}}if (!this.endPhi) {for (var phi = Math.PI / 8, end = (Math.PI * 7) / 8; phi <= end; phi += (Math.PI * 3) / 4) {if (this.phi < phi && this.phi + Math.PI / 200 > phi) {this.phi = Math.PI / 8;this.endPhi = true;break;}}}}if (!this.endTheta) {if (axis.y == this.thresholdY) {this.theta +=(Math.PI / 200) *(this.theta < Math.PI / 2 ||(this.theta >= Math.PI && this.theta < (Math.PI * 3) / 2) ?1 :-1);} else {this.theta += Math.PI / 500;}this.theta %= Math.PI * 2;}if (this.endPhi) {if (this.rippleCount == this.MAX_RIPPLE_COUNT) {this.psi += this.dpsi;this.psi %= Math.PI * 2;}} else {this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);this.phi %= Math.PI;}if (this.y <= -this.renderer.height * this.SURFACE_RATE) {this.x += 2;this.y = -this.renderer.height * this.SURFACE_RATE;} else {this.x += this.vx;this.y += this.vy;}return (this.z > -this.FOCUS_POSITION &&this.z < this.FAR_LIMIT &&this.x < this.renderer.width * 1.5);}};$(function () {console.log(6666);RENDERER.init();});</script><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>
</body></html>

安装插件live server

使用插件运行程序

关注微信公众号「先取个名字吧」更多惊喜等待你的发掘

【表白程序】樱花雨3d相册代码相关推荐

HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...
HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
html css javascript七夕情人节表白网页【樱花雨3D相册】超好看
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页❤抖音超火的樱花雨3D相册❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页
HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是 ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐开关)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...

【表白程序】樱花雨3d相册代码

简介

新建文件夹，vscode打开

建立index.html文件

完整代码获取如下

安装插件live server

使用插件运行程序

【表白程序】樱花雨3d相册代码相关推荐

最新文章

热门文章