js实现点击按钮改变grid布局[2021.11.18]

最新推荐文章于 2024-02-28 08:58:40 发布
最新推荐文章于 2024-02-28 08:58:40 发布
阅读量892 收藏
点赞数 1
文章标签： es6 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/masierty/article/details/121411692
版权

本页面中的按钮是在网上找的，感觉十分好看，变收藏了，侵权立删

这次算是一个启发吧，以后实现点一下换一个主题

废话不说了，上图

 第一个按钮是经典布局，第二个是小清新，第三个是时尚

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: #e0e5ec;
        }

        h1 {
            position: relative;
            text-align: center;
            color: #353535;
            font-size: 50px;
            font-family: "Cormorant Garamond", serif;
        }

        p {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            text-align: center;
            font-size: 18px;
            color: #676767;
        }

        .custom-btn {
            width: 130px;
            height: 40px;
            color: #fff;
            border-radius: 5px;
            padding: 10px 25px;
            font-family: 'Lato', sans-serif;
            font-weight: 500;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            outline: none;
        }

        /* 6 */
        .btn-6 {
            background: rgb(247, 150, 192);
            background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
            line-height: 42px;
            padding: 0;
            border: none;
        }

        .btn-6 span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn-6:before,
        .btn-6:after {
            position: absolute;
            content: "";
            height: 0%;
            width: 1px;
            box-shadow:
                -1px -1px 20px 0px rgba(255, 255, 255, 1),
                -4px -4px 5px 0px rgba(255, 255, 255, 1),
                7px 7px 20px 0px rgba(0, 0, 0, .4),
                4px 4px 5px 0px rgba(0, 0, 0, .3);
        }

        .btn-6:before {
            right: 0;
            top: 0;
            transition: all 500ms ease;
        }

        .btn-6:after {
            left: 0;
            bottom: 0;
            transition: all 500ms ease;
        }

        .btn-6:hover {
            background: transparent;
            color: #76aef1;
            box-shadow: none;
        }

        .btn-6:hover:before {
            transition: all 500ms ease;
            height: 100%;
        }

        .btn-6:hover:after {
            transition: all 500ms ease;
            height: 100%;
        }

        .btn-6 span:before,
        .btn-6 span:after {
            position: absolute;
            content: "";
            box-shadow:
                -1px -1px 20px 0px rgba(255, 255, 255, 1),
                -4px -4px 5px 0px rgba(255, 255, 255, 1),
                7px 7px 20px 0px rgba(0, 0, 0, .4),
                4px 4px 5px 0px rgba(0, 0, 0, .3);
        }

        .btn-6 span:before {
            left: 0;
            top: 0;
            width: 0%;
            height: .5px;
            transition: all 500ms ease;
        }

        .btn-6 span:after {
            right: 0;
            bottom: 0;
            width: 0%;
            height: .5px;
            transition: all 500ms ease;
        }

        .btn-6 span:hover:before {
            width: 100%;
        }

        .btn-6 span:hover:after {
            width: 100%;
        }

        /* 9 */
        .btn-9 {
            border: none;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .btn-9:after {
            position: absolute;
            content: " ";
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1fd1f9;
            background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
            transition: all 0.3s ease;
        }

        .btn-9:hover {
            background: transparent;
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .5),
                inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
            color: #fff;
        }

        .btn-9:hover:after {
            -webkit-transform: scale(2) rotate(180deg);
            transform: scale(2) rotate(180deg);
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .5),
                inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        }


        /* 12 */
        .btn-12 {
            position: relative;
            right: 20px;
            bottom: 20px;
            border: none;
            box-shadow: none;
            width: 130px;
            height: 40px;
            line-height: 42px;
            -webkit-perspective: 230px;
            perspective: 230px;
        }

        .btn-12 span {
            background: rgb(0, 172, 238);
            background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
            display: block;
            position: absolute;
            width: 130px;
            height: 40px;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            border-radius: 5px;
            margin: 0;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        .btn-12 span:nth-child(1) {
            box-shadow:
                -7px -7px 20px 0px #fff9,
                -4px -4px 5px 0px #fff9,
                7px 7px 20px 0px #0002,
                4px 4px 5px 0px #0001;
            -webkit-transform: rotateX(90deg);
            -moz-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -webkit-transform-origin: 50% 50% -20px;
            -moz-transform-origin: 50% 50% -20px;
            transform-origin: 50% 50% -20px;
        }

        .btn-12 span:nth-child(2) {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -webkit-transform-origin: 50% 50% -20px;
            -moz-transform-origin: 50% 50% -20px;
            transform-origin: 50% 50% -20px;
        }

        .btn-12:hover span:nth-child(1) {
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }

        .btn-12:hover span:nth-child(2) {
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            color: transparent;
            -webkit-transform: rotateX(-90deg);
            -moz-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
        }

        .containerOne {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .menu {
            width: 30%;
            display: flex;
            justify-content: space-around;
            margin: 40px 0;
        }

        #template {
            width: 80%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); */
            grid-template-rows: repeat(7, 80px);
            gap: 20px;
        }

        #template div {
            background-color: rgb(131, 202, 250);
            color: rgb(255, 255, 255);
            font-size: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #template div:nth-child(1) {
            grid-column: 1/span 4;
        }

        #template div:nth-child(18) {
            grid-column: 1/5;
            /* grid-area: footer; */
        }
    </style>
</head>

<body>
    <h1>Animation Mould</h1>
    <p>Please choose the style you like!</p>
    <div class="containerOne">
        <div class="menu">
            <button class="custom-btn btn-6"><span>classics</span></button>
            <button class="custom-btn btn-12"><span>Click!</span><span>fresh</span></button>
            <button class="custom-btn btn-9">fashion</button>
        </div>
        <div id="template">
            <div class="item">header</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
            <div class="item">11</div>
            <div class="item">12</div>
            <div class="item">13</div>
            <div class="item">14</div>
            <div class="item">15</div>
            <div class="item">16</div>
            <div class="item">footer</div>
        </div>
    </div>
</body>
<script>
    let btnLisy = document.querySelectorAll("button");
    let temPlate = document.getElementById("template");
    let items = document.querySelectorAll(".item");//#temPlate > div调查为什么不行
    btnLisy[1].onclick = function () {
        initializeFun();
        for (let i = 1; i < 15; i++) {
            items[i].style.display = "none";
        }
        items[15].innerHTML = "leftContent";
        items[15].style.gridColumn = "1/span 1";
        items[15].style.gridRow = "2/span 3";
        items[16].innerHTML = "mainContent";
        items[16].style.gridColumn = "2/span 3";
        items[16].style.gridRow = "2/span 3";
    }
    btnLisy[0].onclick = function () {
        initializeFun();
    }
    btnLisy[2].onclick = function () {
        initializeFun();
        for (let i = 1; i < 13; i++) {
            items[i].style.display = "none";
        }
        items[13].innerHTML = "leftContent";
        items[13].style.gridColumn = "1/span 1";
        items[13].style.gridRow = "2/span 3";
        items[14].innerHTML = "mainContent";
        items[14].style.gridColumn = "2/span 2";
        items[14].style.gridRow = "2/span 3";
        items[15].innerHTML = "rightContent";
        items[15].style.gridColumn = "4/span 1";
        items[15].style.gridRow = "2/span 3";
        items[16].innerHTML = "secondaryContent";
        items[16].style.gridColumn = "1/span 4";
        items[16].style.gridRow = "5/span 1";
    }





    function initializeFun() {
        for (let i = 1; i < 15; i++) {
            items[i].style.display = "flex";
        }
        items[13].innerHTML = "13";
        items[13].style.gridColumn = "";
        items[13].style.gridRow = "";
        items[14].innerHTML = "14";
        items[14].style.gridColumn = "";
        items[14].style.gridRow = "3";
        items[15].innerHTML = "15";
        items[15].style.gridColumn = "";
        items[15].style.gridRow = "";
        items[16].innerHTML = "16";
        items[16].style.gridColumn = "";
        items[16].style.gridRow = "";
    }
</script>

</html>

轻盈的风
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery点击按钮网格布局切换.zip
07-04
jquery点击按钮网格布局切换是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效。
js布局实现单选按钮控件
11-22
本文实例为大家分享了javascript布局实现单选按钮控件的具体代码，供大家参考，具体内容如下 主要是对最近学习的知识做练习，可以巩固提高！ 效果如下图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>单选控件</title> <style type="text/css"> .radioD{ width: 300px; height: 300px; background: url(field.jpg) no-repeat; } .radioD li{ font-size: 1
Grid.Clock.saver Mac屏保
08-11
Grid.Clock.saver Mac屏保
利用JS实现点击按钮后图片自动切换的简单方法
01-21
我么常常看到一个网站的主界面的图片可以切换自如，那么又是如何实现的呢？ 1.HTML页面布局如图所示： Main（div） top(div)（显示需要显示的图片） bottom UL （li）<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta http-equiv='Conte
黑色的用户登录表单ui布局
06-01
css3制作黑色简单的用户名/密码登录表单，带图标和占位符的登录表单ui模板下载。
-webkit-perspective属性
Focus-Fe
09-08 2882
-webkit-perspective属性                ----------   将平面图形转换为具有透视的3D图形，该属性只能使其子元素产生3D，不对自身节点产生影响。   只影响3D转换元素       http://ued.ctrip.com/blog/wp-content/webkitcss/demo/perspective.html      ...
grid的布局
hkduan的博客
04-20 813
在JS的世界里，单个字符判断是true或者false时，以下几个是false: 0、null、""、undefined 或 NaN，这些都可以自动转化为布尔的 false。 相当于Boolean(0) 短路运算符中用到。 2 && (a=1); //2为true，所以a=1 null && a=1; //2<1为false，所以不执行后面的，结果为前面nul...
动态修改grid-template-columns的值
yhengf_520的专栏
06-11 2986
ts：this.elementRef.nativeElement.getElementsByClassName('pin-digits')[0].style ="grid-template-columns: repeat(" + this.maxEntries + ", 16px)"; js：document.getElementsByClassName('screen')[0].style =...
最强大的布局方案——网格Grid布局万字详解
热门推荐
郊眠寺
12-17 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。移动端浏览器：*) 从上图我们可以看出第一列的宽度为150px，第二列和第三列以1：2的比例均分了剩余空间) 如上图所示，第三列的宽度最小不小于10px，最大不超过50px。
前端页面布局之【Grid布局】详解
商务合作/软件定制/学习交流
10-07 1774
前端页面布局之【Grid布局】详解
grid布局demo.html
02-02
grid布局demo.html
Grid简单入门布局.pptx
02-25
技术分享ppt
grid.rar_grid布局
09-20
最简单的grid布局，九宫格有4*4条线组成,因此子元素的值为1~4
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
Vue网格布局 什么是Vue网格布局？ vue-grid-layout是的网格布局系统，例如 。 受极大启发 产品特点 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或...
ExtJS 组件_button按钮配置-属性-方法详解
行者彡的博客
03-17 5550
https://docs.sencha.com/extjs/7.3.0/modern/Ext.html Ext.QuickTips.init(); var buttonName =new Ext.Button({ id:"buttonName", text:"Button组件基本用法", tooltip:"提示信息：Button组件基本用法", //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init(); tooltipType:"title",//定义显示提示信息的类型，有qti
html让登录框3d,CSS3实现3D旋转动态显示登录注册
weixin_35437202的博客
06-08 419
CSS3实现3D旋转动态显示登录注册* {Box-sizing: border-Box;-webkit-font-smoothing: antialiased}body,html {width: 100%;height: 100%}body {position: relative;background: radial-gradient(#666,#222);}.form-card-containe...
vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统
最新发布
zhang_zan
02-28 1583
vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统
js 实现拖动按钮添加布局
weixin_42630688的博客
01-12 492
js 拖动生成指定布局
button点击事件及三种布局
m0_37934678的博客
08-15 1134
为Button的点击事件注册一个监听器，这样每次点击button时，就会执行监听器中的onClick()方法，可以采用匿名内部类或者实现接口的方法。 1.匿名内部类 2.实现接口
18. plt.grid
05-19
`plt.grid()` 是一个 matplotlib 库中的函数，用于在当前图表中添加网格线。它可以接受一些可选参数来自定义网格线的样式和颜色等属性。例如，`plt.grid(True, linestyle='--', linewidth=0.5, color='gray')` 将在当前图表中添加灰色的虚线网格线，线宽为 0.5。`plt.grid(False)` 可以用来关闭当前图表中的网格线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值