0
点赞
收藏
分享

微信扫一扫

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（二_启动页）

技术只适用于干活 2023-07-13 阅读 75
前端WebfishcsshtmlHtml/CSS前端开发


文章目录

  • 整体效果
  • 返回总结
  • 思路
  • 组件
  • 图片块
  • 代码
  • 独属JS文件 firstSee.js
  • 独属css文件 JQM_fish_firsetSee_style.css
  • html文件 JQM_fish_firsetSee.html

整体效果

返回总结

如何利用Boostrap框架搭建一个还可以的静态网站

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（二_启动页）_Web

思路

整体来说 这里我使用了别人提供的JQ动画插件，放了一个鱼的游走的鱼群动画

这里的效果是用来等待五秒动画 跳转到主页 其余的是插件部分
这个title 是我在字魂上使用字体，然后让同学帮忙使用PS扣出来的效果

如果你要使用,可以自行下载并修改动画

组件

图片块

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（二_启动页）_css_02

<div id="mainHolder"> 
		
		<div id="" class="row">
			</div>
			<div id="" class="col-lg-4"></div>
			
			<div id="" class="col-lg-4"><!--这里的BOX 是我使用的title 用来等待五秒动画 跳转到主页 其余的是插件部分-->
				<div id="" class="div_center_byHeight_50percent">
					<a href="index.html"><img src="img/_Main_Tiele.png"></a>							
				</div>
			</div>
			
			<div id="" class="col-lg-4"></div>
			
		</div>

  </div>

css

.div_center_byHeight_50percent{
	margin-top: 50%;
}

代码

独属JS文件 firstSee.js

$(window).bind("load", function (){
	setTimeout(function(){
		window.location.href="index.html";
	},5000);
});

独属css文件 JQM_fish_firsetSee_style.css

html {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	background: #ffffff;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#mainHolder {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 15px;
	text-align: center;
	width: 100%;
	height: auto;
	position: absolute;
	pointer-events: none;
}

.contentWrapper {
	width: 80%;
	max-width: 600px;
	margin: 5% auto;
}

.header {
	font-size: 60px;
}

#settingHolder {
	width: 450px;
	border: #999 solid 2px;
	text-align: left;
	font-size: 12px;
	margin: 5% auto;
	padding: 5px 30px;
	pointer-events: auto;
}

.columnBig {
	width: 100%;
	float: left;
}

.column {
	width: 45%;
	margin: 2.5%;
	float: left;
}

.column span {
	font-weight: bold;
}

.row {
	margin: 0 0 20px;
}

.slider {
	height: 5px;
	margin-top: 10px;
}

.ui-slider .ui-slider-handle {
	width: 10px;
	height: 15px;
}

#colour {
	width: 50%;
	height: 20px;
	margin-top: 10px;
	border: #CCC solid 1px;
}

#reset {
	width: 20%;
	height: 20px;
	margin-left: 40%;
}

#canvasHolder {
	width: 100%;
	height: 100%;
}

.ignorePadding {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@-webkit-viewport {
	width:device-width
}

@-moz-viewport {
	width:device-width
}

@-ms-viewport {
	width:device-width
}

@-o-viewport {
	width:device-width
}

@viewport {
	width:device-width
}

html文件 JQM_fish_firsetSee.html

<!DOCTYPE html>
<html class="no-js">
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<title>Fish Animation</title> 
<meta name="Title" content="Fish Animation" /> 
<meta name="description" content="Fish Animation is a jQuery plugin that transform a HTML5 canvas element into configurable fish animation using CreateJS library." />
<meta name="keywords" content="fish, animation, plugin, canvas, swim, swimming, water, turn, sea, pool, koi" /> 

<link rel="stylesheet" href="css/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/indexCss1.css" />
<link rel="stylesheet" type="text/css" href="css/SmokeNote_Style.css" />
<link rel="stylesheet" type="text/css" href="css/CommonStyle.css" />
<link rel="stylesheet" type="text/css" href="animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/HairLossGuide.css" />
<link rel="stylesheet" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" href="css/JQM_fish_firsetSee_style.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/CommonStyle.js"></script>
<script src="js/firstSee.js"></script>
</head> 
<body> 

  <div id="mainHolder"> 
		
		<div id="" class="row">
			</div>
			<div id="" class="col-lg-4"></div>
			
			<div id="" class="col-lg-4"><!--这里的BOX 是我使用的title 用来等待五秒动画 跳转到主页 其余的是插件部分-->
				<div id="" class="div_center_byHeight_50percent">
					<a href="index.html"><img src="img/_Main_Tiele.png"></a>							
				</div>
			</div>
			
			<div id="" class="col-lg-4"></div>
			
		</div>

  </div>
  
  <div id="canvasHolder"> 
   <canvas id="fishHolder" width="800" height="500"></canvas> 
  </div>
  
  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
  <script src="js/jqColorPicker.min.js"></script> 
  <script src="js/createjs-2015.11.26.min.js"></script> 
  <script src="js/fish-animation.js"></script> 
  <script>
	  $(function() {
		$('#fishHolder').fishAnimation();
		$(window).resize(function() {
			resizeFunc();
		});
		resizeFunc();
		buildSettings();
	});
	function buildSettings() {
		$("#numberFish").slider({
			range: "max",
			max: 100,
			min: 1,
			value: 25,
			slide: function(event, ui) {
				$("span#numberFishNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'number', ui.value);
			}
		});
		$("#swimspeed").slider({
			range: "max",
			max: 30,
			min: 1,
			value: 5,
			slide: function(event, ui) {
				$("span#swimspeedNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'swimspeed', ui.value);
			}
		});
		$("#downspeed").slider({
			range: "max",
			max: 1,
			min: .9,
			value: .98,
			step: 0.01,
			slide: function(event, ui) {
				$("span#downspeedNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'downspeed', ui.value);
			}
		});
		$("#rounder").slider({
			range: "max",
			max: 50,
			min: 5,
			value: 10,
			slide: function(event, ui) {
				$("span#rounderNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'rounder', ui.value);
			}
		});
		$("#turning").slider({
			range: "max",
			max: 15,
			min: 0,
			value: 3,
			slide: function(event, ui) {
				$("span#turningNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'turning', ui.value);
			}
		});
		$("#scaleRange").slider({
			range: "max",
			max: 5,
			min: 1,
			value: 3,
			step: 0.1,
			slide: function(event, ui) {
				$("span#scaleRangeNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'scaleRange', ui.value);
			}
		});
		$("#swimTimer").slider({
			range: "max",
			max: 300,
			min: 10,
			value: 50,
			slide: function(event, ui) {
				$("span#swimTimerNum").html(ui.value);
				$('#fishHolder').fishAnimation('update', 'swimTimer', ui.value);
			}
		});
		$('#colour').colorPicker({
			renderCallback: function($elm) {
				$('#colour').val(this.color.colors.HEX);
				$('#fishHolder').fishAnimation('update', 'colour', '#' + this.color.colors.HEX);
			}
		});
		$('#reset').click(function() {
			$("#swimspeed").slider("value", 5);
			$("#swimspeedNum").html(5);
			$("#downspeed").slider("value", 0.98);
			$("#downspeedNum").html(0.98);
			$("#rounder").slider("value", 10);
			$("#rounderNum").html(10);
			$("#turning").slider("value", 3);
			$("#turningNum").html(3);
			$("#numberFish").slider("value", 25);
			$("#numberFishNum").html(25);
			$("#scaleRange").slider("value", 3);
			$("#scaleRangeNum").html(3);
			$("#swimTimer").slider("value", 50);
			$("#swimTimerNum").html(50);
			$('#fishHolder').fishAnimation();
		});
	}
	function resizeFunc() {
		windowW = $(window).width();
		windowH = $(window).height();
		var gameCanvas = document.getElementById("fishHolder");
		gameCanvas.width = windowW;
		gameCanvas.height = windowH;
		$('#mainHolder').css('width', windowW);
		$('#mainHolder').css('height', windowH);
		$('#fishHolder').fishAnimation('update', 'canvasW', windowW);
		$('#fishHolder').fishAnimation('update', 'canvasH', windowH);
	}
	</script> 

 </body>
</html>


举报

相关推荐

[Web]如何利用Boostrap框架搭建一个还可以的静态网站

前端BootstrapcssCSS代码人生

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（六_子页）

前端csshtmlideHarmonyOS后端开发

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（四_子页_戒烟小说）

前端csshtmlidePython后端开发

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）

前端csshtmlicoPython后端开发

一个服务器可以搭建几个网站

c语言基础题

如何利用 Go 创建一个 Web 应用

服务器WebhtmlGo语言后端开发yyds干货盘点

如何快速搭建一个wordpress个人网站？

服务器运维腾讯云云计算WordPressPython后端开发

利用 nodeJS 搭建一个简单的Web服务器

html服务器WebJavaScript前端开发

利用 Solon-web 框架写一个 Hello World

Solon 微型WEB框架

基于gin框架搭建的一个简单的web服务

前端
0 条评论