bootstrap实现天平效果

之前提到了,最近,孩子的幼儿园让家长体验“半日助教活动”,每个家长需要讲授15-20分钟的课程。作为一名程序员,实在没有能教的课程,只能做了一个小游戏,带着小朋友们熟悉数字。

在上一章博客中,笔者发布了九宫格中猫捉老鼠的小游戏源码,下面再把通过bootstrap实现天平效果的源码发布,供读者参考。

效果大致是这样的。通过前端代码生成一个简易的天平,天平两边分别随机生成一个数字,点击较大的数字天平就会倾斜。

天平两边生成随机数的截图:

点击较大数字天平倾斜的截图:

废话不多说,直接上源码。

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入bootstrap --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="./css/d2g.css"><title>跷跷板比大小</title>
</head>
<body><div id="imgInfo">跷跷板比大小</div><!-- 跷跷板 --><div class="jenga-container"><div class="jenga-block" id="block1"></div><div class="line" id="line"></div><div class="sjx" id="sjx"></div><div class="jenga-block" id="block2"></div></div>
</body>
<!-- 引入js文件 -->
<script src="./js/d2g.js"></script>
</html>

html代码没什么好说的,就是两个方块儿,中间用横线连接,横线下面再放一个三角形作为支点。

css:

#imgInfo{width: 100%;margin-top: 20px;text-align: center;color: blue;
}
#line {height: 2px; /* 设置为最大高度 */background-color: #000;position: absolute;transform-origin: top; transition: transform 0.8s ease-out;
}
#sjx {width: 100px;height: 100px; /* 设置为最大高度 */background-image: url('../img/sjx1.jpg'); /* 设置背景图片 */background-size: cover; /* 背景图片覆盖整个div区域 */background-position: center; /* 背景图片居中 */position: absolute;transition: transform 0.8s ease-out;
}
.jenga-container {display: flex;justify-content: space-around;align-items: flex-end;
}.jenga-block {background-color: yellowgreen;margin: 2px 0;text-align: center;transform: translateX(0);transition: transform 0.8s ease-out;
}

css中通过transition属性设置了天平横线、方块儿、三角形的倾斜效果。

js:

window.onload = function(xh){// 获取视口宽度const viewportWidth = window.innerWidth// 获取视口高度const viewportHeight = window.innerHeightvar imgInfo = document.querySelector('#imgInfo')var line = document.querySelector('#line')var sjx = document.querySelector('#sjx')var block1 = document.querySelector('#block1')var block2 = document.querySelector('#block2')var jengacontainer = document.getElementsByClassName('jenga-container')//为每个容器设置heightfor(var i=0;i<jengacontainer.length;i++){jengacontainer[i].style.height = viewportHeight*0.34+'px'}var jengablock = document.getElementsByClassName('jenga-block')//为每个容器设置heightfor(var i=0;i<jengablock.length;i++){jengablock[i].style.height = viewportHeight*0.24+'px'jengablock[i].style.width = viewportWidth*0.15+'px'jengablock[i].style.fontSize = viewportHeight*0.17+'px'}imgInfo.style.height = viewportHeight*0.12+'px'imgInfo.style.fontSize = viewportHeight*0.06+'px'line.style.width = viewportWidth*0.35+'px'line.style.top = (viewportHeight-viewportHeight*0.63)+'px'sjx.style.top = (viewportHeight-viewportHeight*0.63+2)+'px'sjx.style.width = viewportWidth*0.08+'px'sjx.style.height = viewportWidth*0.08+'px'let szqz1 = Math.floor(Math.random() * 10);block1.innerHTML = szqz1;let szqz2 = getRandomNumber(szqz1)block2.innerHTML = szqz2;/*** 点击三角形重置数字*/sjx.onclick = function(){var audio1 = new Audio('./audio/py2.MP3');// 播放音频audio1.play();}/*** 播放音频*/if(xh!=2){//开始配音var audio = new Audio('./audio/py8.MP3');// 播放音频audio.play();}/*** block2里面的数字大*/block2.onclick = function(){const y =  viewportHeight*0.3block2.style.transform = 'translateY('+y+'px)';//线变斜const y2 =  viewportHeight*0.12const radians = Math.atan2(y, viewportWidth*0.35);// 将弧度转换为角度const degrees = radians * (180 / Math.PI);const a = viewportWidth*0.35const b = viewportHeight*0.3const c= Math.sqrt(a*a + b*b)line.style.width = c+'px';line.style.transform = 'translateY('+y2+'px) rotate('+degrees+'deg)';sjx.style.transform = 'translateY('+(y/2+4)+'px)';//播放音频var audio = new Audio('./audio/py11.MP3');// 播放音频audio.play();}/*** block1里面的数字大*/block1.onclick = function(){const y =  viewportHeight*0.3block1.style.transform = 'translateY('+y+'px)';//线变斜const y2 =  viewportHeight*0.12const radians = Math.atan2(y, viewportWidth*0.35);// 将弧度转换为角度const degrees = radians * (180 / Math.PI);const a = viewportWidth*0.35const b = viewportHeight*0.3const c= Math.sqrt(a*a + b*b)line.style.width = c+'px';line.style.transform = 'translateY('+y2+'px) rotate('+(-degrees)+'deg)';sjx.style.transform = 'translateY('+(y/2+4)+'px)';//播放音频var audio = new Audio('./audio/py11.MP3');// 播放音频audio.play();}
}
function getRandomNumber(exclude) {let num;do {num = Math.floor(Math.random() * 10);} while (num === exclude);return num;
}

js中需要注意一下,这里有个小小的算法,因为在数字大的方块儿下移的时候,中间的天平横线长度也要跟着变,不然无法连接到两端。所以,要通过勾股定理计算出天平横线的长度、倾斜角度和中间三角形下降的距离。在block1/block2.onclick函数中可以看到这个小小的算法。

笔者这里只是实现了很简单的效果,但大概原理是对的。各位读者可以自行试试~~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【读书】读书笔记——理科生的视角:底层逻辑+数学之美

1&#xff0c;底层逻辑1&#xff08;看清这个世界的底牌&#xff09; 刘润 著 0&#xff09;什么是底层逻辑&#xff1f; 底层逻辑是&#xff1a;事物之间共同点、变化背后不变的东西事&#xff1b;看清事物的本质&#xff0c;才能在复杂变化中从根本上解决问题。 1&#x…

【Java继承】(超级详细!!!)

【Java继承】&#xff08;超级详细&#xff01;&#xff01;&#xff01;&#xff09; 1、 继承的概念2 、继承的语法3、 父类成员访问3.1 子类中访问父类的成员变量3.2 子类中访问父类的成员方法 4、 super关键字5 、子类的构造方法6、 继承关系上的执行顺序7、protected 关键…

ubuntu20.04安装后配置:wifi、屏幕亮度、Nvidia驱动等

文章目录 一、安装时最好用英语&#xff0c;否则Downloads等home下文件夹是中文二、安装后开机无法进入系统图形界面三、清理不必要软件&#xff0c;更新系统四、屏幕亮度、Nvidia驱动五、wifi 一、安装时最好用英语&#xff0c;否则Downloads等home下文件夹是中文 安装完再在…

error: ‘address‘ in ‘class school‘ does not name a type school:: address = “

错误代码 class school{ public:string name;static string address; public:static string getAddress(){return address;} };school::address "南京路";原因 school::address “南京路”;前面未加类型&#xff0c;导致编译错误 解决 class school{ public:stri…

选项卡式小部件QTabWidget

文章目录 1. 详细介绍2. 常用属性3. 信号4. 常用函数5. 官方示例Tab Dialog QTabWidget提供一堆选项卡式小部件。 1. 详细介绍 选项卡式部件提供一个选项卡栏和一个用于显示与每个选项卡相关的页面的页面区域。 默认情况下&#xff0c;选项卡栏显示在页面区域上方&#xff0c;…

Vue.js - 计算属性与侦听器 【0基础向 Vue 基础学习】

文章目录 计算属性 computedcomputed 的使用方法computed 与 method 的区别计算属性完整写法 watch 侦听器&#xff08;监视器&#xff09;简单写法 → 简单类型数据&#xff0c;直接监视完整写法 → 添加额外配置项 计算属性 computed computed 的使用方法 **概念&#xff1…

web题解,基础知识巩固(qsnctf)

1.文章管理系统 1&#xff09;打开题目&#xff0c;把它页面翻完了&#xff0c;没看懂它有啥用 2&#xff09;看了看源码&#xff0c;也是一样的&#xff0c;没找到有用的东西 3&#xff09;想着可能还是在隐藏文件里找&#xff0c;那我就直接用dirsearch扫扫看 4&#xff09;…

初识C++ · 模拟实现vector

目录 前言&#xff1a; 1 部分简单函数的实现 2 push_back和pop_back 3 reserve和resize 4 Print_vector 5 insert和erase 6 拷贝构造 7 构造 8 赋值 9 memcpy的问题 10 迭代器失效 前言&#xff1a; 继上文模拟实现了string之后&#xff0c;接着就模拟实现vector&…

DataFrame—数据汇总9

s3.sort_index() 文章最前&#xff1a; 我是Octopus&#xff0c;这个名字来源于我的中文名--章鱼&#xff1b;我热爱编程、热爱算法、热爱开源。所有源码在我的个人github &#xff1b;这博客是记录我学习的点点滴滴&#xff0c;如果您对 Python、Java、AI、算法有兴趣&#xf…

MyBatis复习笔记

3.Mybatis复习 3.1 xml配置 properties&#xff1a;加载配置文件 settings&#xff1a;设置驼峰映射 <settings><setting name"mapUnderscoreToCamelCase" value"true"/> </settings>typeAliases&#xff1a;类型别名设置 #这样在映射…

如何去除视频上的文字?免费无痕去水印分享!视频制作良器!

对于需要进行二次创作的视频素材&#xff0c;去除原有的文字可以提供一个更加干净的画布&#xff0c;方便创作者在其基础上进行新的创作和编辑。同时&#xff0c;去除文字后的视频也更方便分享到各种平台&#xff0c;避免因为平台对文字的限制而导致视频无法发布或传播。 要去除…

Kotlin 标准函数 with、run、apply 的定义和使用

Kotlin 标准函数 with、run、apply 的定义和使用 1. with 函数 定义&#xff1a; with 函数允许你在一个对象的上下文中执行一个 lambda 表达式&#xff0c;而不需要在 lambda 表达式中重复引用该对象。 kotlin.internal.InlineOnly public inline fun <T, R> with(r…

云计算期末复习(1)

云计算基础 作业&#xff08;问答题&#xff09; &#xff08;1&#xff09;总结云计算的特点。 透明的云端计算服务 “无限”多的计算资源&#xff0c;提供强大的计算能力 按需分配&#xff0c;弹性伸缩&#xff0c;取用方便&#xff0c;成本低廉资源共享&#xff0c;降低企…

python 3.10 install on centos

CentOS 7 安装 Python 3.10_yum python3.10-CSDN博客

Homebrew安装mysql之后,启动和使用MySQL服务:

启动MySQL服务&#xff1a; brew services start mysql 手动启动服务&#xff1a; mysql.server start 例如&#xff1a; mysql.server start Starting MySQL .. SUCCESS! 停止 MySQL服务&#xff1a; brew services stop mysql 或者 mysql.server stop 重启MySQL服务&a…

IDEA使用Maven打包项目的所有的依赖

要使用 Maven 命令将 Spring Boot 项目的依赖打包到 lib 文件夹中&#xff0c;你可以在终端中运行以下命令&#xff1a; mvn dependency:copy-dependencies -DoutputDirectory./lib这个命令会将项目的所有依赖&#xff08;包括运行时依赖&#xff09;复制到当前目录的 lib 文件…

Windows操作系统基本知识整理

目录 引言 一、Windows操作系统的发展历史 1.1 Windows 1.0到Windows 3.0 1.2 Windows 95到Windows Me 1.3 Windows NT到Windows 2000 1.4 Windows XP到Windows 7 1.5 Windows 8到Windows 10 二、Windows操作系统的核心组件 2.1 内核 2.2 文件系统 2.3 图形用户界面&…

内网横向移动小补充 --->PTK

大家别急&#xff0c;我的基于资源的约束性委派攻击还在写&#xff0c;这个东西一时半会讲不清楚&#xff0c;所以我在这里先来补充一点横向移动以前没说好的东西&#xff01;&#xff01;&#xff01; 在更啦&#xff0c;别催啦~~~~ 还记得我之前在内网渗透里面讲过这个PTK&a…

亚马逊云主管马特·加尔曼面临压力,致力于在人工智能领域赶超竞争对手

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

mysql中连接查询的成本

大家好。上篇文章我们讲了mysql中成本的含义以及单表查询如何计算成本。现在我们接着讲讲mysql中连接查询的成本。 在讲之前&#xff0c;我们先创建两张一样的表single_table和single_table2&#xff0c;并在表中插入10000条数据。在下面的讲解中&#xff0c;我们称single_tab…