前端還能這麼玩?(女朋友生日,用前端寫了一個好玩的送給了她,高興壞了)
一年一度的生日到了
該送啥禮物好呢?
該送啥禮物好呢?
該送啥禮物好呢?
該送啥禮物好呢?
哎呀,有了
注意:圖片是百度上找的
效果圖:
可以訪問:https://8042965.github.io/happy/ 檢視哦
準備素材
- 可以是你女朋友的美照(我是百度找的個圖)
- 可以是表情包
注意圖片大小:最好是90*90的,如果不是,我教你怎麼修改:
1、用windows自帶的照片檢視軟體開啟圖片
2、調整大小
差不多就行
動手實操
專案結構如下
修改index.html中的圖片
修改main.html的圖片
程式碼給你
index.html
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div{
display:inline;
}
</style>
</head>
<body style="background:#000;">
<div style="width:550px;">
<marquee width=400 scrollamount=5>
<img src="skin/images//a.jpg"/>
</marquee>
</div>
<div style="width:550px;margin:20px auto 0 auto;">
<object width="550" height="400" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553544800">
<param value="flash236.swf" name="movie">
<param value="high" name="quality">
<param value="transparent" name="wmode">
<embed width="550" height="400" wmode="transparent" type="application/x-shockwave-flash" quality="high" src="flash236.swf">
</object>
</div>
<marquee width=400 scrollamount=5>
<a href="main.html">
<FONT face=楷體_GB2312 color=#ff0000 size=3>
<STRONG>祝你生日快樂,祝你生日快樂!這是一個帶著驚喜來的連結,請點選我試試。</STRONG>
</FONT>
</a>
</marquee>
</body>
</html>
main.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,hight=device-hight,minimum-scale=1.0,maximum-scale=1.0,ser-scalable=none"/>
<title>生日快樂</title>
<style type="text/css">
body { margin: 0; padding: 0; position: relative; background-image: url(skin/images/xh.jpg); background-position: center; /*background-repeat: no-repeat;*/ width: 100%; height: 100%; background-size: 100% 100%; }
#jk {
width: 30%;
position: fixed;
right: 10px;
bottom: 40px;
}
</style>
</head>
<body id="body" onLoad="init()">
<script type="text/javascript" src="skin/js/threecanvas.js"></script>
<script type="text/javascript" src="skin/js/snow.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;//
var SCREEN_HEIGHT = window.innerHeight;
var container;
var particle;//粒子
var camera;
var scene;
var renderer;
var starSnow = 1;
var particles = [];
var particleImage = new Image();
//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
// particleImage.src = 'skin/images/ParticleSmoke.png';
particleImage.src = 'skin/images/a1.jpg';
function init() {
//alert("message3");
container = document.createElement('div');//container:畫布例項;
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;
//camera.position.y = 50;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
//alert("message2");
for (var i = 0; i < 500; i++) {
//alert("message");
particle = new Particle3D( material);
particle.position.x = Math.random() * 2000-1000;
particle.position.z = Math.random() * 2000-1000;
particle.position.y = Math.random() * 2000-1000;
//particle.position.y = Math.random() * (1600-particle.position.z)-1000;
particle.scale.x = particle.scale.y = 1;
scene.add( particle );
particles.push(particle);
}
container.appendChild( renderer.domElement );
//document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'touchend', onDocumentTouchEnd, false );
setInterval( loop, 1000 / 60 );
}
var touchStartX;
var touchFlag = 0;//儲存當前是否滑動的狀態;
var touchSensitive = 80;//檢測滑動的靈敏度;
//var touchStartY;
//var touchEndX;
//var touchEndY;
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
//event.preventDefault();//取消預設關聯動作;
touchStartX = 0;
touchStartX = event.touches[ 0 ].pageX ;
//touchStartY = event.touches[ 0 ].pageY ;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
//event.preventDefault();
var direction = event.touches[ 0 ].pageX - touchStartX;
if (Math.abs(direction) > touchSensitive) {
if (direction>0) {touchFlag = 1;}
else if (direction<0) {touchFlag = -1;};
//changeAndBack(touchFlag);
}
}
}
function onDocumentTouchEnd (event) {
// if ( event.touches.length == 0 ) {
// event.preventDefault();
// touchEndX = event.touches[ 0 ].pageX ;
// touchEndY = event.touches[ 0 ].pageY ;
// }這裡存在問題
var direction = event.changedTouches[ 0 ].pageX - touchStartX;
changeAndBack(touchFlag);
}
function changeAndBack (touchFlag) {
var speedX = 25*touchFlag;
touchFlag = 0;
for (var i = 0; i < particles.length; i++) {
particles[i].velocity=new THREE.Vector3(speedX,-10,0);
}
var timeOut = setTimeout(";", 800);
clearTimeout(timeOut);
var clearI = setInterval(function () {
if (touchFlag) {
clearInterval(clearI);
return;
};
speedX*=0.8;
if (Math.abs(speedX)<=1.5) {
speedX=0;
clearInterval(clearI);
};
for (var i = 0; i < particles.length; i++) {
particles[i].velocity=new THREE.Vector3(speedX,-10,0);
}
},100);
}
function loop() {
for(var i = 0; i<particles.length; i++){
var particle = particles[i];
particle.updatePhysics();
with(particle.position)
{
if((y<-1000)&&starSnow) {y+=2000;}
if(x>1000) x-=2000;
else if(x<-1000) x+=2000;
if(z>1000) z-=2000;
else if(z<-1000) z+=2000;
}
}
camera.lookAt(scene.position);
renderer.render( scene, camera );
}
</script>
</body>
</html>
js
snow.js
Particle3D=function(material){
THREE.Particle.call(this,material);
this.velocity=new THREE.Vector3(0,0,0);//速度;
this.velocity.rotateX(10);//旋轉;
this.gravity=new THREE.Vector3(0,0,0.5);//加速度;
this.drag=1;//速度相乘係數;
};
//Particle:粒子;
//prototype:原形;
Particle3D.prototype=new THREE.Particle();
Particle3D.prototype.constructor=Particle3D;//建構函式
Particle3D.prototype.updatePhysics=function(){
this.velocity.multiplyScalar(this.drag);//向量相乘函式
this.velocity.addSelf(this.gravity);//向量相加函式
this.position.addSelf(this.velocity);//向量相加函式
}
var TO_RADIANS=Math.PI/180;//角度向弧度轉換系數*
THREE.Vector3.prototype.rotateY=function(angle){
//繞Y軸順時針旋轉angle;
cosRY=Math.cos(angle*TO_RADIANS);
sinRY=Math.sin(angle*TO_RADIANS);
var tempz=this.z;
var tempx=this.x;
this.x=(tempx*cosRY)+(tempz*sinRY);
this.z=(tempx*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateX=function(angle){
//繞X軸順時針旋轉angle;
cosRY=Math.cos(angle*TO_RADIANS);
sinRY=Math.sin(angle*TO_RADIANS);
var tempz=this.z;;
var tempy=this.y;
this.y=(tempy*cosRY)+(tempz*sinRY);
this.z=(tempy*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateZ=function(angle){
//繞Z軸順時針旋轉angle;
cosRY=Math.cos(angle*TO_RADIANS);
sinRY=Math.sin(angle*TO_RADIANS);
var tempx=this.x;;
var tempy=this.y;
this.y=(tempy*cosRY)+(tempx*sinRY);
this.x=(tempy*-sinRY)+(tempx*cosRY);
}
function randomRange(min,max){
return((Math.random()*(max-min))+ min);
}
注意:這裡順便送大家一套2020最新企業web前端全棧開發專案實戰視訊教程,點選此處 進來獲取 跟著練習下,希望大家一起進步哦!
threecanvas.js
因為這個js的程式碼有點長,是官方提供的,就不直接放了,地址:
https://github.com/8042965/8042965.github.io/tree/master/happy
所有程式碼都在
相關文章
- 花了20分鐘,給女朋友們寫了一個web版群聊程式Web
- 精讀《Serverless 給前端帶來了什麼》Server前端
- Node.js 給前端帶來了什麼Node.js前端
- 為什麼Web前端薪資如此高呢?總結了這4個原因Web前端
- 雙十二來了,你的表格可以這樣玩!這個工具還能提升Excel的效能Excel
- Flutter | 日誌還能這麼列印,太秀了!Flutter
- 微信小程式的出現給前端帶來了什麼微信小程式前端
- 收益 or 挑戰?Serverless 究竟給前端帶來了什麼Server前端
- 這個好玩又實用的jupyter外掛我真的愛了
- 我造了個前端 Mock 工具前端Mock
- Web 前端單元測試到底要怎麼寫?看這一篇就夠了Web前端
- 微信和Python之間,還能這樣玩的嘛,漲見識了!Python
- 於是,我們給前端分享會定義了一個未定義的名字前端
- 為了讓她10分鐘入門canvas,我熬夜寫了3個小專案和這篇文章Canvas
- 寫了這麼多年 JavaScript ,竟然還不知道這些技巧?JavaScript
- 給喜歡的女孩子寫了一段python程式碼,不用我表白,就成我女朋友了Python
- 我已經寫了48年程式碼了,我感覺我還能寫下去
- 學了幾個月還是很迷茫?一個前端實習生應該具備怎麼樣的能力?前端
- 前端linux基礎,這一篇就夠了前端Linux
- 快端午了,用Python畫一盤粽子送給你Python
- 快過年了,用Python寫副春聯&福字送給你~Python
- 人工智慧ChatGPT被玩壞了人工智慧ChatGPT
- 用 vuetifyjs 擼了個前端介面,感覺對前端不是很精通的後端還是可以用一用,元件基本夠用VueJS前端後端元件
- 現在的AI工具還能寫劇本殺了?AI
- 用Python寫個了紅包提醒,再不怕錯過一個億了Python
- 手機沒網了,卻還能支付,這是什麼原理?
- 六年了,這款遊戲為什麼還是有這麼多人在玩遊戲
- SpringAI 她來了,真的來了SpringAI
- 用 Laravel 6 寫了一個部落格Laravel
- 懷疑前端元件把我的excel檔案搞壞了,怎麼證明前端元件Excel
- 為什麼Java有了synchronized之後還造了Lock鎖這個輪子?Javasynchronized
- 寫文章一年了,我用到的工具都在這兒了!
- 太熱了!程式猿給女朋友做了個智慧小風扇
- 寫了一個 MySQL 代理MySql
- 寫了一個 WebSocket 框架Web框架
- 關於 nginx 前端知道這些就夠了Nginx前端
- 前端入行兩年--教會了我這些道理前端
- 前端入行兩年–教會了我這些道理前端