写点什么

开源一夏 | 疫情期间闲来无事,我自制了一个按钮展示框特效来展示我的博客

作者:上进小菜猪
  • 2022 年 8 月 08 日
  • 本文字数:5273 字

    阅读完需:约 17 分钟

开源一夏 | 疫情期间闲来无事,我自制了一个按钮展示框特效来展示我的博客

一.前言

这几天博主这的疫情比较严重,小区都封了,在家闲来无事,作为一个后端程序员的我,前端技术菜的一批,但是最近有写一个个人技术,博客情况和项目介绍的前端展示特效,让别人可以快速的了解我,对于前端知识之前也接触过一些基础的技术栈,勇敢的我决定还是要尝试一下,对于按钮展示框,我自己从 0 到 1 的写了一个,用到的技术就是基础的 html+css+JavaScript+jqurey。效果图如下:




二.想法设计/实现过程

秉持着最少空间可以展示更多内容的原则,我初步的想法是,设计三个按钮,点击不同的按钮会显示不同的内容。1,介绍我的博客粉丝,浏览量。2,介绍我做过的项目。3,展示我现有的技术栈。


所以,我前期的设计图如下:


三.基本样式

3.1 先定义盒子模型:(最外面的大框)

代码如下,先设计一个大的盒子,为了好看,我们可以设计一个半角过渡:html:


<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>  </head>  <body>    <div class="transmit">      </div>    </div>  </body></html>
复制代码


css:


.transmit {        width: 100%;        height: 600px;        background-color: #7174a6;        position: relative;        border-radius: 0px 120px 0px 0px;      }
复制代码


运行截图如下:


3.2 定义按钮

已美观为原则,我们在外面的大盒子上面写下一排————ABOUT ME————,下面分别设计三个按钮,目的是为了点击不同的按钮来显示不同的内容。分别为:1.MCN 矩阵 2.开源世界 3.技术栈


效果以及代码如下:HTML 代码段如下:


<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>      </head>  <body>    <div class="transmit">      <div class="aboutme">————ABOUT ME————</div>      <div class="buttonx">        <span onclick="show1()">MCN矩阵</span>        <span onclick="show2()">开源世界</span>        <span onclick="show3()">技术栈</span>      </div>      </div>    </div>          </body></html>
复制代码


css 代码如下:


.transmit {        width: 100%;        height: 600px;        background-color: #7174a6;        position: relative;        border-radius: 0px 120px 0px 0px;      }
.aboutme { position: absolute; color: #FFFFFF; font-size: 28px; font-weight: 600; top: 30px; left: 50%; margin-left: -213px; }
.buttonx span:hover { color: rgba(11, 113, 214, 0.9); background-color: aliceblue; } .buttonx span { margin-right: 20px; border-radius: 20px; padding: 15px; font-size: 25px; background-color: rgba(11, 113, 214, 0.9); color: aliceblue; } .buttonx { position: absolute; left: 50%; margin-left: -230px; top: 105px; cursor: pointer; }
复制代码


3.3 分栏格子效果

因为设计到我的博客平台和开源项目较多,我在大盒子下面设计了若干个小盒子,为了美观,我还写了鼠标悬浮效果。


HTML 代码和 CSS 代码段如下:


<!DOCTYPE html><html>  <head>    <meta charset="utf-8">          <style>        /* 传递开始 */        .transmit {          width: 100%;          height: 600px;          background-color: #7174a6;          position: relative;          border-radius: 0px 120px 0px 0px;        }                /* 关于我 */        .aboutme {          position: absolute;          color: #FFFFFF;          font-size: 28px;          font-weight: 600;          top: 30px;          left: 50%;          margin-left: -213px;        }                .buttonx {          position: absolute;          left: 50%;          margin-left: -230px;          top: 105px;          cursor: pointer;        }                .buttonx span:hover {          color: rgba(11, 113, 214, 0.9);          background-color: aliceblue;        }                .buttonx span {          margin-right: 20px;          border-radius: 20px;          padding: 15px;          font-size: 25px;          background-color: rgba(11, 113, 214, 0.9);          color: aliceblue;        }                .textabout {          width: 900px;          height: 400px;          /* background-color: #008000; */          top: 165px;          left: 50%;          margin-left: -450px;        }                        .textabout li {          background-color: rgba(255, 255, 255, 0.8);          width: 195px;          height: 195px;          list-style: none;          margin-right: 15px;          margin-bottom: 15px;          float: left;          border-radius: 30px;                }                /* 处理img大小不一问题 */        .textabout li img {          width: 190px;          /* max-width: 90%; */        }                .huawei {          top: 10px;          position: absolute;        }                .cto51,        .juejing,        .gowork {          left: 4px;          top: 20px;          position: absolute;        }                .textabout .zhihu {          position: absolute;          top: 20px;          left: 50px;          width: 100px;        }                .textabout .ali,        .gitee {          left: 4px;          width: 180px;          top: 20px;          position: absolute;        }                .textabout .infoq {          left: 15px;          width: 180px;          top: 20px;          position: absolute;        }                .textabout .tranimg {          position: absolute;          height: 100px;          /* background-color: #000000; */        }                .textabout {          position: absolute;        }                .textabout li span {                  margin-top: 100px;          text-align: center;          display: block;          color: black;          font-size: 15px;          font-weight: 900;        }                .textabout li:hover {          background-color: rgba(255, 255, 255, 0.8);          width: 200px;          height: 200px;          list-style: none;          margin-right: 10px;          margin-bottom: 10px;          float: left;          border-radius: 30px;          color: red;        }                .textabout li:hover span {          color: #afb42b;        }                        /* 技术栈 */        .textaboutx {          width: 900px;          height: 400px;          background-color: rgba(255, 255, 255, 0.8);          border-radius: 30px;          top: 165px;          left: 50%;          margin-left: -450px;        }                .b3title {          top: 10px;          position: absolute;          left: 50%;          font-size: 40px;          color: #00283a;          margin-left: -210px;          font-family: KaiTi;        }                .b3text {          font-size: 22px;          top: 60px;          position: absolute;          left: 5%;          font-family: STKaiti;        }              </style>      
</head> <body> <!-- 传递开始 --> <div class="transmit"> <div class="aboutme">————ABOUT ME————</div> <div class="buttonx"> <span onclick="show1()">MCN矩阵</span> <span onclick="show2()">开源世界</span> <span onclick="show3()">技术栈</span> </div> <div id="button2" class="textabout"> <ul> <a href="https://gitee.com/shangjinzhu/luck5" target="_blank"> <li> <div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div> <span> 题小满_非原生开发前后端分离的移动端应用<br>前后端均已开源 </span> </li> </a> <a href="#"> <li> <div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div> <span> IMUSTCTF_前后端一体开发<br>保密项目,暂不能开源 </span> </li> </a> <a href="https://gitee.com/shangjinzhu/qingsan" target="_blank"> <li> <div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div> <span> 遇见青山_包头政府活动网站<br>部分开源 </span> </li> </a> <a href="https://gitee.com/shangjinzhu/qingsan" target="_blank"> <li> <div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div> <span> gowork.fit网站<br>后续逐步全开源 </span> </li> </a> <li> <div class="tranimg"><img src="image/giehub.png" class="gitee" /></div> <span> 后续敬请期待更多开源项目。<br /> github同步开源,点击进入我的github主页。 </span> </li> </ul> </div>
</body></html>
复制代码


效果如下:非常的好看,大大的提升了与用户的友好性,鼠标悬浮会有选中过渡效果,非常的人性化。


3.4 JavaScript 控制效果

现在需要实现,点击不同的按钮来显示不同的内容,点击 MCN 矩阵显示,我的若干个博客,点击开源世界显示我的开源项目,点击技术栈,显示我的目前掌握的技术栈:实现如下效果:



这里主要使用 JavaScript 控制器来控制。


window.onload = function() {  show1();  showtext1();}
function show1() { document.getElementById("button1").style.display = "block"; document.getElementById("button2").style.display = "none"; document.getElementById("button3").style.display = "none";};
function show2() { document.getElementById("button2").style.display = "block"; document.getElementById("button1").style.display = "none"; document.getElementById("button3").style.display = "none";}
function show3() { document.getElementById("button3").style.display = "block"; document.getElementById("button1").style.display = "none"; document.getElementById("button2").style.display = "none";}
复制代码


值得注意的是,因为网页加载的顺序,我们需要在刚运行 js 语言执行 show1()函数,让其他俩个的内容隐藏,只显示第一个按钮的内容。效果如下:


    <script >        show1();      window.onload = function() {        show1();      }    </script >    <script >      window.onload = function() {        show1();      }      show1();      function show1() {        document.getElementById("button1").style.display = "block";        document.getElementById("button2").style.display = "none";        document.getElementById("button3").style.display = "none";      };            function show2() {        document.getElementById("button2").style.display = "block";        document.getElementById("button1").style.display = "none";        document.getElementById("button3").style.display = "none";      }            function show3() {        document.getElementById("button3").style.display = "block";        document.getElementById("button1").style.display = "none";        document.getElementById("button2").style.display = "none";      }    </script>      </body></html>
复制代码


发布于: 2022 年 08 月 08 日阅读数: 81
用户头像

上进小菜猪 2022.03.29 加入

努力做全栈,爱好开发,开发专业户。

评论

发布
暂无评论
开源一夏 | 疫情期间闲来无事,我自制了一个按钮展示框特效来展示我的博客_开源_上进小菜猪_InfoQ写作社区